Clear previously selected files from input element when ReactS3FineUploader fails

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',

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;