From 224439f62be6d7627d3152c9a0f670633b92c7cc Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 5 Sep 2023 13:07:21 +0700
Subject: [PATCH] support drag and drop upload in composer

---
 src/shared/composer/mediaUploader.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/shared/composer/mediaUploader.tsx b/src/shared/composer/mediaUploader.tsx
index 6907165f..ef9f0fce 100644
--- a/src/shared/composer/mediaUploader.tsx
+++ b/src/shared/composer/mediaUploader.tsx
@@ -1,6 +1,7 @@
 import { message } from '@tauri-apps/api/dialog';
+import { UnlistenFn, listen } from '@tauri-apps/api/event';
 import { Editor } from '@tiptap/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { MediaIcon } from '@shared/icons';
 
@@ -10,7 +11,7 @@ export function MediaUploader({ editor }: { editor: Editor }) {
   const { upload } = useNostr();
   const [loading, setLoading] = useState(false);
 
-  const uploadImage = async (file?: string) => {
+  const uploadToNostrBuild = async (file?: string) => {
     try {
       // start loading
       setLoading(true);
@@ -26,14 +27,32 @@ export function MediaUploader({ editor }: { editor: Editor }) {
     } catch (e) {
       // stop loading
       setLoading(false);
-      await message('Upload failed', { title: 'Lume', type: 'error' });
+      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
     }
   };
 
+  useEffect(() => {
+    let unlisten: UnlistenFn;
+
+    async function listenDnD() {
+      unlisten = await listen('tauri://file-drop', (event) => {
+        uploadToNostrBuild(event.payload[0]);
+      });
+    }
+
+    // start listen drag and drop event
+    listenDnD();
+
+    // clean up
+    return () => {
+      unlisten();
+    };
+  }, []);
+
   return (
     <button
       type="button"
-      onClick={() => uploadImage()}
+      onClick={() => uploadToNostrBuild()}
       className="ml-2 inline-flex h-10 w-max items-center justify-center gap-1.5 rounded-lg px-2 text-sm font-medium text-white/80 hover:bg-white/10 hover:backdrop-blur-xl"
     >
       <MediaIcon className="h-5 w-5 text-white/80" />