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

@@ -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);
     };
   }, []);

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>

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',