Improved paste handling to allow pasting images copied from the browser (#3334)

webapp/components/file_upload.jsx

@@ -199,7 +199,7 @@ class FileUpload extends React.Component {
         var inputDiv = ReactDOM.findDOMNode(this.refs.input);
         const {formatMessage} = this.props.intl;
 
-        if (!e.clipboardData) {
+        if (!e.clipboardData || !e.clipboardData.items) {
             return;
         }
 
@@ -211,40 +211,37 @@ class FileUpload extends React.Component {
 
         this.props.onUploadError(null);
 
-        // This looks redundant, but must be done this way due to
-        // setState being an asynchronous call
-        var items = e.clipboardData.items;
-        var numItems = 0;
-        if (items) {
-            for (let i = 0; i < items.length; i++) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    var testExt = items[i].type.split('/')[1].toLowerCase();
+        const items = [];
+        for (let i = 0; i < e.clipboardData.items.length; i++) {
+            const item = e.clipboardData.items[i];
 
-                    if (Constants.IMAGE_TYPES.indexOf(testExt) < 0) {
+            if (item.type.indexOf('image') === -1) {
                 continue;
             }
 
-                    numItems++;
-                }
+            if (Constants.IMAGE_TYPES.indexOf(item.type.split('/')[1].toLowerCase()) === -1) {
+                continue;
             }
 
-            var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(ChannelStore.getCurrentId()), numItems);
+            items.push(item);
+        }
 
-            if (numItems > numToUpload) {
+        // This looks redundant, but must be done this way due to
+        // setState being an asynchronous call
+        if (items) {
+            var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(ChannelStore.getCurrentId()), items.length);
+
+            if (items.length > numToUpload) {
                 this.props.onUploadError(formatMessage(holders.limited, {count: Constants.MAX_UPLOAD_FILES}));
             }
 
+            const channelId = this.props.channelId || ChannelStore.getCurrentId();
+
             for (var i = 0; i < items.length && i < numToUpload; i++) {
-                if (items[i].type.indexOf('image') !== -1) {
                 var file = items[i].getAsFile();
 
                 var ext = items[i].type.split('/')[1].toLowerCase();
 
-                    if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
-                        continue;
-                    }
-                    var channelId = this.props.channelId || ChannelStore.getCurrentId();
-
                 // generate a unique id that can be used by other components to refer back to this file upload
                 var clientId = Utils.generateId();
 
@@ -280,7 +277,6 @@ class FileUpload extends React.Component {
             }
         }
     }
-    }
 
     keyUpload(e) {
         if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.U) {