From 4eb49ca90d1a17150d242908733acb450037f487 Mon Sep 17 00:00:00 2001
From: Bruno <38665405+TheBrunoRM@users.noreply.github.com>
Date: Tue, 6 Aug 2024 04:14:31 -0300
Subject: [PATCH] allow dropping files as input

---
 src/plugins/voiceMessages/index.tsx | 32 +++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/plugins/voiceMessages/index.tsx b/src/plugins/voiceMessages/index.tsx
index 8365bb51a..229a1e71e 100644
--- a/src/plugins/voiceMessages/index.tsx
+++ b/src/plugins/voiceMessages/index.tsx
@@ -137,6 +137,11 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
     const [blob, setBlob] = useState<Blob>();
     const [blobUrl, setBlobUrl] = useObjectUrl();
 
+    const setAudioBlob = blob => {
+        setBlob(blob);
+        setBlobUrl(blob);
+    };
+
     useEffect(() => () => {
         if (blobUrl)
             URL.revokeObjectURL(blobUrl);
@@ -182,6 +187,16 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
         || blob.type.includes("codecs") && !blob.type.includes("opus")
     );
 
+    const handleDrop = async (event) => {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        if (file) setAudioBlob(file);
+    };
+
+    const handleDragOver = (event) => {
+        event.preventDefault();
+    };
+
     return (
         <ModalRoot {...modalProps}>
             <ModalHeader>
@@ -189,22 +204,21 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
             </ModalHeader>
 
             <ModalContent className={cl("modal")}>
-                <div className={cl("buttons")}>
+                <div
+                    onDrop={handleDrop}
+                    onDragOver={handleDragOver}
+                    className={cl("buttons")}
+                >
+
                     <VoiceRecorder
-                        setAudioBlob={blob => {
-                            setBlob(blob);
-                            setBlobUrl(blob);
-                        }}
+                        setAudioBlob={blob => setAudioBlob(blob)}
                         onRecordingChange={setRecording}
                     />
 
                     <Button
                         onClick={async () => {
                             const file = await chooseFile("audio/*");
-                            if (file) {
-                                setBlob(file);
-                                setBlobUrl(file);
-                            }
+                            if (file) setAudioBlob(file);
                         }}
                     >
                         Upload File