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

@@ -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);
@@ -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) {
@@ -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;
         }
 
@@ -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;