Merge pull request 'allow upload of files using drag and drop' (#670) from fernandoporazzi/snort:drag-and-drop-images into main

Reviewed-on: Kieran/snort#670

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)}

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) => {