zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat(publish-widget): add dropzone for media attachments (#85)

zio/stable
Alvaro Saburido 2022-11-25 10:29:16 +01:00 committed by GitHub
parent 5e54cbe792
commit d3e4e22ed1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/publish/PublishWidget.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CreateStatusParams, StatusVisibility } from 'masto' import type { CreateStatusParams, StatusVisibility } from 'masto'
import { fileOpen } from 'browser-fs-access' import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core'
const { const {
draftKey, draftKey,
@ -96,6 +97,15 @@ async function publish() {
} }
} }
const dropZoneRef = ref<HTMLDivElement>()
async function onDrop(files: File[] | null) {
if (files)
await uploadAttachments(files)
}
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
onUnmounted(() => { onUnmounted(() => {
if (!draft.attachments.length && !draft.params.status) { if (!draft.attachments.length && !draft.params.status) {
nextTick(() => { nextTick(() => {
@ -122,8 +132,9 @@ onUnmounted(() => {
<AccountAvatar :account="currentUser.account" w-12 h-12 /> <AccountAvatar :account="currentUser.account" w-12 h-12 />
</NuxtLink> </NuxtLink>
<div <div
ref="dropZoneRef"
flex flex-col gap-3 flex-1 flex flex-col gap-3 flex-1
:class="isSending ? 'pointer-events-none' : ''" :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? 'border-2 border-dashed border-primary' : '']"
> >
<textarea <textarea
v-model="draft.params.status" v-model="draft.params.status"