From 552a324e0884c2ad4a5aa5af1c11739c301930a7 Mon Sep 17 00:00:00 2001
From: ginnyTheCat <ginnythecat@lelux.net>
Date: Thu, 3 Feb 2022 15:40:22 +0100
Subject: [PATCH] Drag and drop files (#283)

* Add file drop

* Skip if no files are droped

* Show the page is not accepting file on the welcome page
---
 src/app/organisms/room/RoomViewInput.jsx |  2 ++
 src/app/templates/client/Client.jsx      | 30 +++++++++++++++++++++++-
 src/client/state/cons.js                 |  1 +
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index e8d5d39..d574d86 100644
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -58,9 +58,11 @@ function RoomViewInput({
 
   useEffect(() => {
     settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
+    roomsInput.on(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
     viewEvent.on('focus_msg_input', requestFocusInput);
     return () => {
       settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
+      roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
       viewEvent.removeListener('focus_msg_input', requestFocusInput);
     };
   }, []);
diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index 6130a18..6768cc4 100644
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -12,6 +12,8 @@ import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 import logout from '../../../client/action/logout';
 
 import initMatrix from '../../../client/initMatrix';
+import navigation from '../../../client/state/navigation';
+import cons from '../../../client/state/cons';
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
@@ -54,8 +56,34 @@ function Client() {
       </div>
     );
   }
+
+  const handleDrag = (e) => {
+    e.preventDefault();
+
+    if (!navigation.selectedRoomId) {
+      e.dataTransfer.dropEffect = 'none';
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+
+    const roomId = navigation.selectedRoomId;
+    if (!roomId) return;
+
+    const { files } = e.dataTransfer;
+    if (!files) return;
+    const file = files[0];
+    initMatrix.roomsInput.setAttachment(roomId, file);
+    initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
+  };
+
   return (
-    <div className="client-container">
+    <div
+      className="client-container"
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+    >
       <div className="navigation__wrapper">
         <Navigation />
       </div>
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 2516b2a..97dcf9e 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -108,6 +108,7 @@ const cons = {
     },
     roomsInput: {
       MESSAGE_SENT: 'MESSAGE_SENT',
+      ATTACHMENT_SET: 'ATTACHMENT_SET',
       FILE_UPLOADED: 'FILE_UPLOADED',
       UPLOAD_PROGRESS_CHANGES: 'UPLOAD_PROGRESS_CHANGES',
       FILE_UPLOAD_CANCELED: 'FILE_UPLOAD_CANCELED',