From 34fa2bb524643ff194eaabc084b44c35f62e2c85 Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Wed, 8 Nov 2023 18:59:21 +0100
Subject: [PATCH] allow upload of files using drag and drop

---
 .../app/src/Element/Event/NoteCreator.tsx     | 23 ++++++++++++++++++-
 packages/app/src/Element/Textarea.tsx         |  3 +++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/Element/Event/NoteCreator.tsx b/packages/app/src/Element/Event/NoteCreator.tsx
index 986895a6..1284302e 100644
--- a/packages/app/src/Element/Event/NoteCreator.tsx
+++ b/packages/app/src/Element/Event/NoteCreator.tsx
@@ -12,7 +12,7 @@ import ProfileImage from "Element/User/ProfileImage";
 import useFileUpload from "Upload";
 import Note from "Element/Event/Note";
 
-import { ClipboardEventHandler } from "react";
+import { ClipboardEventHandler, DragEvent } from "react";
 import useLogin from "Hooks/useLogin";
 import { GetPowWorker } from "index";
 import AsyncButton from "Element/AsyncButton";
@@ -505,6 +505,24 @@ export function NoteCreator() {
     }
   };
 
+  const handleDragOver = (event: DragEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (event: DragEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+
+    const droppedFiles = Array.from(event.dataTransfer.files);
+
+    droppedFiles.forEach(async file => {
+      await uploadFile(file);
+    })
+  };
+
   function noteCreatorForm() {
     return (
       <>
@@ -550,6 +568,9 @@ export function NoteCreator() {
         {!note.preview && (
           <div onPaste={handlePaste} className={classNames("note-creator", { poll: Boolean(note.pollOptions) })}>
             <Textarea
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
               autoFocus
               className={classNames("textarea", { "textarea--focused": note.active })}
               onChange={c => onChange(c)}
diff --git a/packages/app/src/Element/Textarea.tsx b/packages/app/src/Element/Textarea.tsx
index 3333bd49..a4a72680 100644
--- a/packages/app/src/Element/Textarea.tsx
+++ b/packages/app/src/Element/Textarea.tsx
@@ -51,6 +51,9 @@ interface TextareaProps {
   value: string;
   onFocus(): void;
   onKeyDown(ev: React.KeyboardEvent<HTMLTextAreaElement>): void;
+  onDragOver?(ev: React.DragEvent<HTMLTextAreaElement>): void;
+  onDragLeave?(ev: React.DragEvent<HTMLTextAreaElement>): void;
+  onDrop?(ev: React.DragEvent<HTMLTextAreaElement>): void;
 }
 
 const Textarea = (props: TextareaProps) => {