add file hashing functionality to react fine uploader

js/components/ascribe_detail/further_details.js

@@ -171,8 +171,7 @@ let FileUploader = React.createClass({
                             }
                         }}
                         areAssetsDownloadable={true}
-                        areAssetsEditable={this.props.editable}/
+                        areAssetsEditable={this.props.editable}/>
-                        localHashing={true}>
                 </Property>
                 <hr />
             </Form>

js/components/ascribe_forms/form_register_piece.js

@@ -172,7 +172,8 @@ let FileUploader = React.createClass({
                     customHeaders: {
                        'X-CSRFToken': getCookie(AppConstants.csrftoken)
                     }
-                }}/>
+                }}
+                localHashing={true} />
         );
     }
 });

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -516,6 +516,11 @@ var ReactS3FineUploader = React.createClass({
                 .then((convertedFiles) => {
                     // actually replacing all files with their txt-hash representative
                     files = convertedFiles;
+
+                    // routine for adding all the files submitted to fineuploader for actual uploading them
+                    // to the server
+                    this.state.uploader.addFiles(files);
+                    this.synchronizeFileLists(files);
                 })
                 .catch((err) => {
                     // if we're running into an error during the hash creation, we'll tell the user
@@ -523,12 +528,26 @@ var ReactS3FineUploader = React.createClass({
                     let notification = new GlobalNotificationModel(err.message, 'danger', 5000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 });
-        }
 
-        // routine for adding all the files submitted to fineuploader for actual uploading them
+        // if we're not hashing the files locally, we're just going to hand them over to fineuploader
-        // to the server
+        // to upload them to the server
+        } else {
             this.state.uploader.addFiles(files);
+            this.synchronizeFileLists(files);
+        }
+    },
 
+    // ReactFineUploader is essentially just a react layer around s3 fineuploader.
+    // However, since we need to display the status of a file (progress, uploading) as well as
+    // be able to execute actions on a currently uploading file we need to exactly sync the file list
+    // fineuploader is keeping internally.
+    //
+    // Unfortunately though fineuploader is not keeping all of a File object's properties after
+    // submitting them via .addFiles (it deletes the type, key as well as the ObjectUrl (which we need for
+    // displaying a thumbnail)), we need to readd them manually after each file that gets submitted
+    // to the dropzone.
+    // This method is essentially taking care of all these steps.
+    synchronizeFileLists(files) {
         let oldFiles = this.state.filesToUpload;
         let oldAndNewFiles = this.state.uploader.getUploads();
         // Add fineuploader specific information to new files

js/utils/file_utils.js

@@ -8,9 +8,15 @@ import SparkMD5 from 'spark-md5';
  * @param  {string} text regular javascript string
  * @return {string}      regular javascript string
  */
-function makeTextFile(text) {
+function makeTextFile(text, file) {
-    let data = new Blob([text], {type: 'text/plain'});
+    let textFileBlob = new Blob([text], {type: 'text/plain'});
-    return window.URL.createObjectURL(data);
+    let textFile = new File([textFileBlob], 'hash-of-' + file.name + '.txt', {
+        lastModifiedDate: file.lastModifiedDate,
+        lastModified: file.lastModified,
+        type: 'text/plain'
+    });
+
+    return textFile;
 }
 
 /**
@@ -43,9 +49,8 @@ export function computeHashOfFile(file) {
                     fileHash,
                     Math.round(((new Date() - startTime) / 1000) % 60)); // Compute hash
 
-                let hashFile = makeTextFile(fileHash);
+                let blobTextFile = makeTextFile(fileHash, file);
-                console.info('hash: ', hashFile);
+                resolve(blobTextFile);
-                resolve(hashFile);
             }
         }.bind(this);