implement hashing progress functionality

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -32,7 +32,7 @@ let FileDragAndDrop = React.createClass({
         areAssetsEditable: React.PropTypes.bool,
 
         // triggers a FileDragAndDrop-global spinner
-        isLoading: React.PropTypes.bool
+        hashingProgress: React.PropTypes.number
     },
 
     handleDragStart(event) {
@@ -146,11 +146,12 @@ let FileDragAndDrop = React.createClass({
         className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
         className += this.props.className ? ' ' + this.props.className : '';
 
-        // if true: triggers a FileDragAndDrop-global spinner
+        // if !== -1: triggers a FileDragAndDrop-global spinner
-        if(this.props.isLoading) {
+        if(this.props.hashingProgress !== -1) {
             return (
                 <div className={className}>
                     <p>{getLangText('Computing hashes... This may take a few minutes.')}</p>
+                    <p>{this.props.hashingProgress}</p>
                     <img
                         height={35}
                         className="action-file"

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -151,7 +151,7 @@ var ReactS3FineUploader = React.createClass({
                 }
                 return name;
             },
-            multiple: false,
+            multiple: true,
             defaultErrorMessage: getLangText('Unexpected error. Please contact us if this happens repeatedly.')
         };
     },
@@ -161,7 +161,7 @@ var ReactS3FineUploader = React.createClass({
             filesToUpload: [],
             uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
             csrfToken: getCookie(AppConstants.csrftoken),
-            isLoading: false // for hashing feedback
+            hashingProgress: -1 // for hashing feedback
         };
     },
 
@@ -500,15 +500,19 @@ var ReactS3FineUploader = React.createClass({
         // This if statement essentially takes care of that solution.
         if(this.props.localHashing) {
 
-            // hashing is very computationally heavy, therefore we're displaying the user a little
-            // spinner
-            this.setState({ isLoading: true });
-
             let convertedFilePromises = [];
+            let overallFileSize = 0;
             // "files" is not a classical Javascript array but a Javascript FileList, therefore
             // we can not use map to convert values
             for(let i = 0; i < files.length; i++) {
 
+                // for calculating the overall progress of all submitted files
+                // we'll need to calculate the overall sum of all files' sizes
+                overallFileSize += files[i].size;
+
+                // also, we need to set the files' initial progress value
+                files[i].progress = 0;
+
                 // since the actual computation of a file's hash is an async task ,
                 // we're using promises to handle that
                 let hashedFilePromise = computeHashOfFile(files[i]);
@@ -520,6 +524,21 @@ var ReactS3FineUploader = React.createClass({
             // with the all function for iterables and essentially replace all original files
             // with their txt representative
             Q.all(convertedFilePromises)
+                .progress(({index, value}) => {
+                    // update file's progress
+                    files[index].progress = value;
+
+                    // calculate overall progress
+                    let overallHashingProgress = 0;
+                    for(let i = 0; i < files.length; i++) {
+                        let filesSliceOfOverall = files[i].size / overallFileSize;
+
+                        overallHashingProgress += filesSliceOfOverall * files[i].progress;
+                    }
+
+                    this.setState({ hashingProgress: overallHashingProgress });
+
+                })
                 .then((convertedFiles) => {
 
                     // actually replacing all files with their txt-hash representative
@@ -530,9 +549,6 @@ var ReactS3FineUploader = React.createClass({
                     this.state.uploader.addFiles(files);
                     this.synchronizeFileLists(files);
 
-                    // we're done hashing so we can show the user his uploads
-                    this.setState({ isLoading: false });
-
                 })
                 .catch((err) => {
                     // if we're running into an error during the hash creation, we'll tell the user
@@ -636,7 +652,7 @@ var ReactS3FineUploader = React.createClass({
                     areAssetsDownloadable={this.props.areAssetsDownloadable}
                     areAssetsEditable={this.props.areAssetsEditable}
                     dropzoneInactive={!this.props.areAssetsEditable || !this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1).length > 0}
-                    isLoading={this.state.isLoading} />
+                    hashingProgress={this.state.hashingProgress} />
             </div>
         );
     }

js/utils/file_utils.js

@@ -29,7 +29,7 @@ function makeTextFile(text, file) {
  * @return {string}      regular javascript string
  */
 export function computeHashOfFile(file) {
-    return Q.Promise((resolve, reject) => {
+    return Q.Promise((resolve, reject, notify) => {
         let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
         let chunkSize = 2097152; // Read in chunks of 2MB
         let chunks = Math.ceil(file.size / chunkSize);
@@ -68,6 +68,8 @@ export function computeHashOfFile(file) {
             var start = currentChunk * chunkSize,
                 end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
 
+            // send progress
+            notify(start / file.size);
             fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
         }