Merge pull request #27 from ascribe/AD-812-cannot-reupload-video-without-refresh

Clear previously selected files from input element when upload fails

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js

@@ -45,6 +45,10 @@ let FileDragAndDrop = React.createClass({
         allowedExtensions: React.PropTypes.string
     },
 
+    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',

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -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);
@@ -456,8 +472,9 @@ let ReactS3FineUploader = React.createClass({
             files: this.state.filesToUpload,
             chunks: this.state.chunks
         });
+
         this.props.setIsUploadReady(true);
-        this.state.uploader.cancelAll();
+        this.cancelUploads();
 
         let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
@@ -600,7 +617,7 @@ let ReactS3FineUploader = React.createClass({
     },
 
     handleCancelFile(fileId) {
-        this.state.uploader.cancel(fileId);
+        this.cancelUploads(fileId);
     },
 
     handlePauseFile(fileId) {
@@ -627,6 +644,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;
         }
 
@@ -856,19 +874,16 @@ let ReactS3FineUploader = React.createClass({
 
     render() {
         const {
-            multiple,
-            areAssetsDownloadable,
-            areAssetsEditable,
-            onInactive,
-            enableLocalHashing,
-            uploadMethod,
-            fileClassToUpload,
-            validation,
-            fileInputElement } = this.props;
+             multiple,
+             areAssetsDownloadable,
+             areAssetsEditable,
+             onInactive,
+             enableLocalHashing,
+             fileClassToUpload,
+             fileInputElement: FileInputElement,
+             uploadMethod } = 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,
@@ -886,10 +901,14 @@ let ReactS3FineUploader = React.createClass({
             dropzoneInactive: this.isDropzoneInactive(),
             hashingProgress: this.state.hashingProgress,
             allowedExtensions: this.getAllowedExtensions()
-        });
-    }
+        };
 
+        return (
+            <FileInputElement
+                ref="fileInput"
+                {...props} />
+        );
+    }
 });
 
-
 export default ReactS3FineUploader;

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);
+                        }
                     }) ;
             }
         }