Copy Paste Images in connect (#10484)

app/javascript/chat/chat.jsx

@@ -1429,7 +1429,6 @@ export default class Chat extends Component {
   handleImageDrop = (event) => {
     event.preventDefault();
     const { files } = event.dataTransfer;
-
     event.currentTarget.classList.remove('opacity-25');
     processImageUpload(files, this.handleImageSuccess, this.handleImageFailure);
   };
@@ -1522,6 +1521,7 @@ export default class Chat extends Component {
               markdownEdited={state.markdownEdited}
               editMessageMarkdown={state.activeEditMessage.markdown}
               handleEditMessageClose={this.handleEditMessageClose}
+              handleFilePaste={this.handleFilePaste}
             />
           </div>
         </div>
@@ -1540,6 +1540,28 @@ export default class Chat extends Component {
     );
   };
 
+  handleFilePaste = (e) => {
+    e.preventDefault();
+    if (!e.clipboardData || !e.clipboardData.items) {
+      return;
+    }
+    const items = [];
+    for (let i = 0; i < e.clipboardData.items.length; i++) {
+      const item = e.clipboardData.items[i];
+      if (item.kind !== 'file') {
+        continue;
+      }
+      items.push(item);
+    }
+    if (items && items.length > 0) {
+      processImageUpload(
+        [items[0].getAsFile()],
+        this.handleImageSuccess,
+        this.handleImageFailure,
+      );
+    }
+  };
+
   onTriggerVideoContent = (e) => {
     if (e.target.dataset.content === 'exit') {
       this.setState({

app/javascript/chat/compose.jsx

@@ -14,6 +14,7 @@ export default class Chat extends Component {
     markdownEdited: PropTypes.bool.isRequired,
     editMessageMarkdown: PropTypes.string.isRequired,
     handleEditMessageClose: PropTypes.func.isRequired,
+    handleFilePaste: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -39,6 +40,7 @@ export default class Chat extends Component {
       handleEditMessageClose,
       handleMention,
       handleKeyUp,
+      handleFilePaste,
     } = this.props;
 
     return (
@@ -50,6 +52,7 @@ export default class Chat extends Component {
           onKeyDown={handleKeyDownEdit}
           onKeyPress={handleMention}
           onKeyUp={handleKeyUp}
+          onPaste={handleFilePaste}
           maxLength="1000"
           aria-label="Let's connect"
         />
@@ -83,6 +86,7 @@ export default class Chat extends Component {
       handleKeyDown,
       handleMention,
       handleKeyUp,
+      handleFilePaste,
     } = this.props;
 
     const handleInput = (e) => {
@@ -108,6 +112,7 @@ export default class Chat extends Component {
           onKeyDown={handleKeyDown}
           onKeyPress={handleMention}
           onKeyUp={handleKeyUp}
+          onPaste={handleFilePaste}
           maxLength="1000"
           value={this.state.value}
           onInput={handleInput}