🚀 Feature: Ability to upload images to connect by drag and drop (#9992)

app/javascript/article-form/actions.js

@@ -91,8 +91,9 @@ export function generateMainImage(payload, successCb, failureCb) {
       if (json.error) {
         throw new Error(json.error);
       }
-
-      return successCb(json);
+      const { links } = json;
+      const { image } = payload;
+      return successCb({ links, image });
     })
     .catch(failureCb);
 }

app/javascript/chat/chat.jsx

@@ -8,6 +8,7 @@ import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 import { setupPusher } from '../utilities/connect';
 import debounceAction from '../utilities/debounceAction';
+import { dragDrop } from '../utilities/dragAndUpload';
 import { addSnackbarItem } from '../Snackbar';
 import {
   conductModeration,
@@ -1411,7 +1412,44 @@ export default class Chat extends Component {
       .getElementById('jumpback_button')
       .classList.remove('chatchanneljumpback__hide');
   };
+  handleImageDrop = (e) => {
+    e.preventDefault();
+    const { files } = e.dataTransfer;
 
+    const messageArea = document.getElementById('messagelist');
+    messageArea.classList.remove('opacity-25');
+    messageArea.classList.add('opacity-100');
+    dragDrop(files, this.handleImageSuccess, this.handleImageFailure);
+  };
+  handleImageSuccess = (res) => {
+    const { links, image } = res;
+    const mLink = `![${image[0].name}](${links[0]})`;
+    const el = document.getElementById('messageform');
+    const start = el.selectionStart;
+    const end = el.selectionEnd;
+    const text = el.value;
+    let before = text.substring(0, start);
+    before = text.substring(0, before.lastIndexOf('@') + 1);
+    const after = text.substring(end, text.length);
+    el.value = `${before + mLink} ${after}`;
+    el.selectionStart = start + mLink.length + 1;
+    el.selectionEnd = start + mLink.length + 1;
+    el.focus();
+  };
+  handleImageFailure = (e) => {
+    addSnackbarItem({ message: e.message, addCloseButton: true });
+  };
+  handleDragHover(e) {
+    e.preventDefault();
+    const messageArea = document.getElementById('messagelist');
+    messageArea.classList.add('opacity-25');
+  }
+  handleDragExit(e) {
+    e.preventDefault();
+    const messageArea = document.getElementById('messagelist');
+    messageArea.classList.remove('opacity-25');
+    messageArea.classList.add('opacity-100');
+  }
   renderActiveChatChannel = (channelHeader) => {
     const { state, props } = this;
 
@@ -1426,6 +1464,9 @@ export default class Chat extends Component {
               this.scroller = scroller;
             }}
             id="messagelist"
+            onDragOver={this.handleDragHover}
+            onDragExit={this.handleDragExit}
+            onDrop={this.handleImageDrop}
           >
             {this.renderMessages()}
             <div className="messagelist__sentinel" id="messagelist__sentinel" />

app/javascript/utilities/dragAndUpload.js

@@ -0,0 +1,9 @@
+import { generateMainImage } from '../article-form/actions';
+import { validateFileInputs } from '../packs/validateFileInputs';
+
+export function dragDrop(files, handleImageSuccess, handleImageFailure) {
+  if (files.length > 0 && validateFileInputs()) {
+    const payload = { image: files };
+    generateMainImage(payload, handleImageSuccess, handleImageFailure);
+  }
+}