From 4336190b5e90427c30e739f6125ba424235c32b9 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 13 Nov 2015 12:10:51 +0100
Subject: [PATCH 1/3] Fix FineUploader to handle cancellations in the onError()
 callback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Calling cancel() in the onError() callback would cause an error as the
upload handler tries to clear the upload’s xhr requests after cancel
already clears them.
---
 js/components/ascribe_uploader/vendor/s3.fine-uploader.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_uploader/vendor/s3.fine-uploader.js b/js/components/ascribe_uploader/vendor/s3.fine-uploader.js
index 5b90cf5a..ae2ed1df 100644
--- a/js/components/ascribe_uploader/vendor/s3.fine-uploader.js
+++ b/js/components/ascribe_uploader/vendor/s3.fine-uploader.js
@@ -4399,7 +4399,9 @@ qq.UploadHandlerController = function(o, namespace) {
                     }
                 )
                     .done(function() {
-                        handler.clearXhr(id, chunkIdx);
+                        if (handler._getFileState(id)) {
+                            handler.clearXhr(id, chunkIdx);
+                        }
                     }) ;
             }
         }

From 7bc549223628967a47788a816d94c0d104400ec7 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 13 Nov 2015 12:20:52 +0100
Subject: [PATCH 2/3] Clear previously selected files from input element when
 ReactS3FineUploader fails

---
 .../file_drag_and_drop.js                     | 24 ++++----
 .../react_s3_fine_uploader.js                 | 57 ++++++++++++-------
 2 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 38ec459a..95ebd150 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -45,6 +45,10 @@ let FileDragAndDrop = React.createClass({
         location: React.PropTypes.object
     },
 
+    clearSelection() {
+        this.refs.fileSelector.getDOMNode().value = '';
+    },
+
     handleDragOver(event) {
         event.preventDefault();
 
@@ -81,30 +85,30 @@ let FileDragAndDrop = React.createClass({
     },
 
     handleDeleteFile(fileId) {
-        // input's value is not change the second time someone
+        // input's value is not changed the second time someone
         // inputs the same file again, therefore we need to reset its value
-        this.refs.fileinput.getDOMNode().value = '';
+        this.clearSelection();
         this.props.handleDeleteFile(fileId);
     },
 
     handleCancelFile(fileId) {
-        // input's value is not change the second time someone
+        // input's value is not changed the second time someone
         // inputs the same file again, therefore we need to reset its value
-        this.refs.fileinput.getDOMNode().value = '';
+        this.clearSelection();
         this.props.handleCancelFile(fileId);
     },
 
     handlePauseFile(fileId) {
-        // input's value is not change the second time someone
+        // input's value is not changed the second time someone
         // inputs the same file again, therefore we need to reset its value
-        this.refs.fileinput.getDOMNode().value = '';
+        this.clearSelection();
         this.props.handlePauseFile(fileId);
     },
 
     handleResumeFile(fileId) {
-        // input's value is not change the second time someone
+        // input's value is not changed the second time someone
         // inputs the same file again, therefore we need to reset its value
-        this.refs.fileinput.getDOMNode().value = '';
+        this.clearSelection();
         this.props.handleResumeFile(fileId);
     },
 
@@ -133,7 +137,7 @@ let FileDragAndDrop = React.createClass({
             evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
         }
 
-        this.refs.fileinput.getDOMNode().dispatchEvent(evt);
+        this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
     },
 
     render: function () {
@@ -206,7 +210,7 @@ let FileDragAndDrop = React.createClass({
                         */}
                         <input
                             multiple={multiple}
-                            ref="fileinput"
+                            ref="fileSelector"
                             type="file"
                             style={{
                                 visibility: 'hidden',
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index e8cc8bfa..95e0fffe 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -192,11 +192,11 @@ let ReactS3FineUploader = React.createClass({
             filesToUpload: [],
             uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
             csrfToken: getCookie(AppConstants.csrftoken),
-            
+
             // -1: aborted
             // -2: uninitialized
             hashingProgress: -2,
-            
+
             // this is for logging
             chunks: {}
         };
@@ -259,7 +259,7 @@ let ReactS3FineUploader = React.createClass({
     // Resets the whole react fineuploader component to its initial state
     reset() {
         // Cancel all currently ongoing uploads
-        this.state.uploader.cancelAll();
+        this.cancelUploads();
 
         // and reset component in general
         this.state.uploader.reset();
@@ -271,6 +271,22 @@ let ReactS3FineUploader = React.createClass({
         this.setState(this.getInitialState());
     },
 
+    // Cancel uploads and clear previously selected files on the input element
+    cancelUploads(id) {
+        !!id ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
+
+        // Reset the file input element to clear the previously selected files so that
+        // the user can reselect them again.
+        this.clearFileSelection();
+    },
+
+    clearFileSelection() {
+        const { fileInput } = this.refs;
+        if (fileInput && typeof fileInput.clearSelection === 'function') {
+            fileInput.clearSelection();
+        }
+    },
+
     requestKey(fileId) {
         let filename = this.state.uploader.getName(fileId);
         let uuid = this.state.uploader.getUuid(fileId);
@@ -373,7 +389,7 @@ let ReactS3FineUploader = React.createClass({
 
         let chunks = this.state.chunks;
         let chunkKey = id + '-' + chunkData.startByte + '-' + chunkData.endByte;
-        
+
         if(chunks[chunkKey]) {
             chunks[chunkKey].completed = true;
             chunks[chunkKey].responseJson = responseJson;
@@ -414,7 +430,7 @@ let ReactS3FineUploader = React.createClass({
                     } else {
                         console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader');
                     }
-                    
+
                     // for explanation, check comment of if statement above
                     if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
                         // also, lets check if after the completion of this upload,
@@ -441,11 +457,12 @@ let ReactS3FineUploader = React.createClass({
     },
 
     onError(id, name, errorReason) {
+        this.cancelUploads();
+
         console.logGlobal(errorReason, false, {
             files: this.state.filesToUpload,
             chunks: this.state.chunks
         });
-        this.state.uploader.cancelAll();
 
         let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
@@ -588,7 +605,7 @@ let ReactS3FineUploader = React.createClass({
     },
 
     handleCancelFile(fileId) {
-        this.state.uploader.cancel(fileId);
+        this.cancelUploads(fileId);
     },
 
     handlePauseFile(fileId) {
@@ -597,7 +614,7 @@ let ReactS3FineUploader = React.createClass({
         } else {
             throw new Error(getLangText('File upload could not be paused.'));
         }
-        
+
     },
 
     handleResumeFile(fileId) {
@@ -612,6 +629,7 @@ let ReactS3FineUploader = React.createClass({
         // If multiple set and user already uploaded its work,
         // cancel upload
         if(!this.props.multiple && this.state.filesToUpload.filter(displayValidFilesFilter).length > 0) {
+            this.clearFileSelection();
             return;
         }
 
@@ -823,7 +841,7 @@ let ReactS3FineUploader = React.createClass({
         changeSet.status = { $set: status };
 
         let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
-        
+
         this.setState({ filesToUpload });
     },
 
@@ -850,7 +868,7 @@ let ReactS3FineUploader = React.createClass({
     },
 
     render() {
-        let {
+        const {
              multiple,
              areAssetsDownloadable,
              areAssetsEditable,
@@ -858,13 +876,10 @@ let ReactS3FineUploader = React.createClass({
              enableLocalHashing,
              fileClassToUpload,
              validation,
-             fileInputElement,
-             location
-            } = this.props;
+             fileInputElement: FileInputElement,
+             location } = this.props;
 
-        // Here we initialize the template that has been either provided from the outside
-        // or the default input that is FileDragAndDrop.
-        return React.createElement(fileInputElement, {
+        const props = {
             multiple,
             areAssetsDownloadable,
             areAssetsEditable,
@@ -882,10 +897,14 @@ let ReactS3FineUploader = React.createClass({
             dropzoneInactive: this.isDropzoneInactive(),
             hashingProgress: this.state.hashingProgress,
             allowedExtensions: this.getAllowedExtensions()
-        });
-    }
+        };
 
+        return (
+            <FileInputElement
+                ref="fileInput"
+                {...props} />
+        );
+    }
 });
 
-
 export default ReactS3FineUploader;

From eae22a2e040dd15b839c9baf0bdb88d1fdd550c2 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 13 Nov 2015 16:04:55 +0100
Subject: [PATCH 3/3] Move logging of upload errors to be before cancellation
 of uploads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Although logging isn’t affected by the cancelation of uploads, it may
cause confusion for readers if the uploads are cancelled before the
error is logged.
---
 js/components/ascribe_uploader/react_s3_fine_uploader.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 95e0fffe..e3adef58 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -457,13 +457,13 @@ let ReactS3FineUploader = React.createClass({
     },
 
     onError(id, name, errorReason) {
-        this.cancelUploads();
-
         console.logGlobal(errorReason, false, {
             files: this.state.filesToUpload,
             chunks: this.state.chunks
         });
 
+        this.cancelUploads();
+
         let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },