Merge pull request #776 from weseek/feat/file-upload-with-pasting-from-clipboard

Feat/file upload with pasting from clipboard

src/client/js/components/PageEditor/CodeMirrorEditor.js

@@ -461,14 +461,16 @@ export default class CodeMirrorEditor extends AbstractEditor {
   pasteHandler(editor, event) {
     const types = event.clipboardData.types;
 
-    // text
-    if (types.includes('text/plain')) {
-      pasteHelper.pasteText(this, event);
-    }
     // files
-    else if (types.includes('Files')) {
+    if (types.includes('Files')) {
+      event.preventDefault();
       this.dispatchPasteFiles(event);
     }
+    // text
+    else if (types.includes('text/plain')) {
+      pasteHelper.pasteText(this, event);
+    }
+
   }
 
   /**

src/client/js/components/PageEditor/Editor.jsx

@@ -109,17 +109,25 @@ export default class Editor extends AbstractEditor {
     const items = event.clipboardData.items || event.clipboardData.files || [];
 
     // abort if length is not 1
-    if (items.length != 1) {
+    if (items.length < 1) {
       return;
     }
 
-    const file = items[0].getAsFile();
-    // check type and size
-    if (pasteHelper.fileAccepted(file, dropzone.props.accept) &&
-        pasteHelper.fileMatchSize(file, dropzone.props.maxSize, dropzone.props.minSize)) {
+    for (let i = 0; i < items.length; i++) {
+      try {
+        const file = items[i].getAsFile();
+        // check type and size
+        if (file != null &&
+            pasteHelper.fileAccepted(file, dropzone.props.accept) &&
+            pasteHelper.fileMatchSize(file, dropzone.props.maxSize, dropzone.props.minSize)) {
 
-      this.dispatchUpload(file);
-      this.setState({ isUploading: true });
+          this.dispatchUpload(file);
+          this.setState({ isUploading: true });
+        }
+      }
+      catch (e) {
+        this.logger.error(e);
+      }
     }
   }
 

src/client/js/components/PageEditor/TextAreaEditor.js

@@ -218,14 +218,15 @@ export default class TextAreaEditor extends AbstractEditor {
   pasteHandler(event) {
     const types = event.clipboardData.types;
 
-    // text
-    if (types.includes('text/plain')) {
-      pasteHelper.pasteText(this, event);
-    }
     // files
-    else if (types.includes('Files')) {
+    if (types.includes('Files')) {
+      event.preventDefault();
       this.dispatchPasteFiles(event);
     }
+    // text
+    else if (types.includes('text/plain')) {
+      pasteHelper.pasteText(this, event);
+    }
   }
 
   dragEnterHandler(event) {