Add abort hashing functionality

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -6,8 +6,6 @@ import ProgressBar from 'react-progressbar';
 import FileDragAndDropDialog from './file_drag_and_drop_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
-import AppConstants from '../../constants/application_constants';
-
 import { getLangText } from '../../utils/lang_utils';
 
 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
@@ -33,7 +31,10 @@ let FileDragAndDrop = React.createClass({
         areAssetsEditable: React.PropTypes.bool,
 
         // triggers a FileDragAndDrop-global spinner
-        hashingProgress: React.PropTypes.number
+        hashingProgress: React.PropTypes.number,
+        // sets the value of this.state.hashingProgress in reactfineuploader
+        // to -1 which is code for: aborted
+        handleCancelHashing: React.PropTypes.func
     },
 
     handleDragStart(event) {
@@ -147,12 +148,15 @@ let FileDragAndDrop = React.createClass({
         className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
         className += this.props.className ? ' ' + this.props.className : '';
 
-        // if !== -1: triggers a FileDragAndDrop-global spinner
-        if(this.props.hashingProgress !== -1) {
+        // if !== -2: triggers a FileDragAndDrop-global spinner
+        if(this.props.hashingProgress !== -2) {
             return (
                 <div className={className}>
-                    <p>{getLangText('Computing hashes... This may take a few minutes.')}</p>
-                    <p>{Math.ceil(this.props.hashingProgress)}%</p>
+                    <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
+                    <p>
+                        <span>{Math.ceil(this.props.hashingProgress)}%</span>
+                        <span onClick={this.props.handleCancelHashing}> Abort hashing</span>
+                    </p>
                     <ProgressBar completed={this.props.hashingProgress} color="#48DACB"/>
                 </div>
             );

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -161,7 +161,9 @@ var ReactS3FineUploader = React.createClass({
             filesToUpload: [],
             uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
             csrfToken: getCookie(AppConstants.csrftoken),
-            hashingProgress: -1 // for hashing feedback
+            hashingProgress: -2
+            // -1: aborted
+            // -2: uninitialized
         };
     },
 
@@ -524,17 +526,31 @@ 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}) => {
+                .progress(({index, value: {progress, handleError}}) => {
+
+                    // hashing progress has been aborted from outside
+                    // To get out of the executing, we need to call reject from the
+                    // inside of the promise's execution.
+                    // This is why we're passing (along with value) a function that essentially
+                    // just does that (calling reject(err))
+                    //
+                    // In the promises catch method, we're then checking if the interruption
+                    // was due to that error or another generic one.
+                    if(this.state.hashingProgress === -1) {
+                        handleError(new Error(getLangText('Hashing canceled')));
+                    }
+
                     // update file's progress
-                    files[index].progress = value;
+                    files[index].progress = progress;
 
                     // calculate weighted average for overall progress of all
                     // currently hashing files
                     let overallHashingProgress = 0;
                     for(let i = 0; i < files.length; i++) {
-                        let filesSliceOfOverall = files[i].size / overallFileSize;
 
+                        let filesSliceOfOverall = files[i].size / overallFileSize;
                         overallHashingProgress += filesSliceOfOverall * files[i].progress;
+
                     }
 
                     // Multiply by 100, since react-progressbar expects decimal numbers
@@ -544,7 +560,7 @@ var ReactS3FineUploader = React.createClass({
                 .then((convertedFiles) => {
 
                     // clear hashing progress, since its done
-                    this.setState({ hashingProgress: -1});
+                    this.setState({ hashingProgress: -2});
 
                     // actually replacing all files with their txt-hash representative
                     files = convertedFiles;
@@ -556,9 +572,19 @@ var ReactS3FineUploader = React.createClass({
 
                 })
                 .catch((err) => {
-                    // if we're running into an error during the hash creation, we'll tell the user
-                    console.logGlobal(err);
-                    let notification = new GlobalNotificationModel(err.message, 'danger', 5000);
+                    // If the error is that hashing has been canceled, we want to display a success
+                    // message instead of a danger message
+                    let typeOfMessage = 'danger';
+
+                    if(err.message === getLangText('Hashing canceled')) {
+                        typeOfMessage = 'success';
+                        this.setState({ hashingProgress: -2 });
+                    } else {
+                        // if there was a more generic error, we also log it
+                        console.logGlobal(err);
+                    }
+
+                    let notification = new GlobalNotificationModel(err.message, typeOfMessage, 5000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 });
 
@@ -570,6 +596,13 @@ var ReactS3FineUploader = React.createClass({
         }
     },
 
+    handleCancelHashing() {
+        // Every progress tick of the hashing function in handleUploadFile there is a
+        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
+        // the hashing of all files immediately.
+        this.setState({ hashingProgress: -1 });
+    },
+
     // 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
@@ -653,6 +686,7 @@ var ReactS3FineUploader = React.createClass({
                     handleCancelFile={this.handleCancelFile}
                     handlePauseFile={this.handlePauseFile}
                     handleResumeFile={this.handleResumeFile}
+                    handleCancelHashing={this.handleCancelHashing}
                     multiple={this.props.multiple}
                     areAssetsDownloadable={this.props.areAssetsDownloadable}
                     areAssetsEditable={this.props.areAssetsEditable}

js/utils/file_utils.js

@@ -69,7 +69,13 @@ export function computeHashOfFile(file) {
                 end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
 
             // send progress
-            notify(start / file.size);
+            notify({
+                progress: start / file.size,
+                handleError(err) {
+                    reject(err);
+                }
+            });
+            
             fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
         }