From d3e4e22ed19e4e27beb644f679707dd6ec97dd08 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Fri, 25 Nov 2022 10:29:16 +0100
Subject: [PATCH] feat(publish-widget): add dropzone for media attachments
 (#85)

---
 components/publish/PublishWidget.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index fadfe757..fd7a3b7c 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CreateStatusParams, StatusVisibility } from 'masto'
 import { fileOpen } from 'browser-fs-access'
+import { useDropZone } from '@vueuse/core'
 
 const {
   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(() => {
   if (!draft.attachments.length && !draft.params.status) {
     nextTick(() => {
@@ -122,8 +132,9 @@ onUnmounted(() => {
         <AccountAvatar :account="currentUser.account" w-12 h-12 />
       </NuxtLink>
       <div
+        ref="dropZoneRef"
         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
           v-model="draft.params.status"