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

diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index e8d5d397838639cae350e4961292a751833a7749..d574d86bb2e69d23aa888752e392f28624f04b51 100644 (file)
--- 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 6130a186fd5544af1678684e8254e82491198521..6768cc4a1c9b993152eaaf047f8e27e36313b789 100644 (file)
--- 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 2516b2ae76179f6d053c1ac24be1991d1dc2f5cc..97dcf9efcc5907188e6167cd014e273ef13d6b3e 100644 (file)
--- 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',