implement feedback for hashing functionalitxy

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -5,6 +5,9 @@ import React from 'react';
 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
 let FileDragAndDrop = React.createClass({
@@ -26,7 +29,10 @@ let FileDragAndDrop = React.createClass({
         multiple: React.PropTypes.bool,
         dropzoneInactive: React.PropTypes.bool,
         areAssetsDownloadable: React.PropTypes.bool,
-        areAssetsEditable: React.PropTypes.bool
+        areAssetsEditable: React.PropTypes.bool,
+
+        // triggers a FileDragAndDrop-global spinner
+        isLoading: React.PropTypes.bool
     },
 
     handleDragStart(event) {
@@ -113,7 +119,7 @@ let FileDragAndDrop = React.createClass({
         this.props.handleResumeFile(fileId);
     },
 
-    handleOnClick(event) {
+    handleOnClick() {
         // when multiple is set to false and the user already uploaded a piece,
         // do not propagate event
         if(this.props.dropzoneInactive) {
@@ -140,6 +146,18 @@ 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(this.props.isLoading) {
+            return (
+                <div className={className}>
+                    <p>{getLangText('Computing hashes... This may take a few minutes.')}</p>
+                    <img
+                        height={35}
+                        className="action-file"
+                        src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
+        } else {
             return (
                 <div
                     className={className}
@@ -175,6 +193,7 @@ let FileDragAndDrop = React.createClass({
                 </div>
           );
         }
+    }
 });
 
 export default FileDragAndDrop;

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ProgressBar from 'react-progressbar';
 
 import AppConstants from '../../constants/application_constants';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let FileDragAndDropPreviewImage = React.createClass({
     propTypes: {

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -159,7 +159,8 @@ var ReactS3FineUploader = React.createClass({
         return {
             filesToUpload: [],
             uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
-            csrfToken: getCookie(AppConstants.csrftoken)
+            csrfToken: getCookie(AppConstants.csrftoken),
+            isLoading: false // for hashing feedback
         };
     },
 
@@ -496,6 +497,9 @@ 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 = [];
             // "files" is not a classical Javascript array but a Javascript FileList, therefore
@@ -514,6 +518,7 @@ var ReactS3FineUploader = React.createClass({
             // with their txt representative
             Promise.all(convertedFilePromises)
                 .then((convertedFiles) => {
+
                     // actually replacing all files with their txt-hash representative
                     files = convertedFiles;
 
@@ -521,6 +526,10 @@ var ReactS3FineUploader = React.createClass({
                     // to the server
                     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
@@ -623,7 +632,8 @@ var ReactS3FineUploader = React.createClass({
                     multiple={this.props.multiple}
                     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} />
+                    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} />
             </div>
         );
     }

js/utils/file_utils.js

@@ -2,6 +2,8 @@
 
 import SparkMD5 from 'spark-md5';
 
+import { getLangText } from './lang_utils';
+
 /**
  * Takes a string, creates a text file and returns the URL
  *
@@ -55,7 +57,7 @@ export function computeHashOfFile(file) {
         }.bind(this);
 
         fileReader.onerror = function () {
-            reject(new Error('We weren\'t able to hash your file locally. Try to upload it manually or consider contact us.'));
+            reject(new Error(getLangText('We weren\'t able to hash your file locally. Try to upload it manually or consider contact us.')));
         };
 
         function loadNext() {