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,40 +146,53 @@ let FileDragAndDrop = React.createClass({
         className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
         className += this.props.className ? ' ' + this.props.className : '';
 
-        return (
-            <div
-                className={className}
-                onDragStart={this.handleDragStart}
-                onDrag={this.handleDrop}
-                onDragEnter={this.handleDragEnter}
-                onDragLeave={this.handleDragLeave}
-                onDragOver={this.handleDragOver}
-                onDrop={this.handleDrop}
-                onDragEnd={this.handleDragEnd}>
-                    <FileDragAndDropDialog
-                        multipleFiles={this.props.multiple}
-                        hasFiles={hasFiles}
-                        onClick={this.handleOnClick}/>
-                    <FileDragAndDropPreviewIterator
-                        files={this.props.filesToUpload}
-                        handleDeleteFile={this.handleDeleteFile}
-                        handleCancelFile={this.handleCancelFile}
-                        handlePauseFile={this.handlePauseFile}
-                        handleResumeFile={this.handleResumeFile}
-                        areAssetsDownloadable={this.props.areAssetsDownloadable}
-                        areAssetsEditable={this.props.areAssetsEditable}/>
-                    <input
-                        multiple={this.props.multiple}
-                        ref="fileinput"
-                        type="file"
-                        style={{
-                            display: 'none',
-                            height: 0,
-                            width: 0
-                        }}
-                        onChange={this.handleDrop} />
-            </div>
-      );
+        // 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}
+                    onDragStart={this.handleDragStart}
+                    onDrag={this.handleDrop}
+                    onDragEnter={this.handleDragEnter}
+                    onDragLeave={this.handleDragLeave}
+                    onDragOver={this.handleDragOver}
+                    onDrop={this.handleDrop}
+                    onDragEnd={this.handleDragEnd}>
+                        <FileDragAndDropDialog
+                            multipleFiles={this.props.multiple}
+                            hasFiles={hasFiles}
+                            onClick={this.handleOnClick}/>
+                        <FileDragAndDropPreviewIterator
+                            files={this.props.filesToUpload}
+                            handleDeleteFile={this.handleDeleteFile}
+                            handleCancelFile={this.handleCancelFile}
+                            handlePauseFile={this.handlePauseFile}
+                            handleResumeFile={this.handleResumeFile}
+                            areAssetsDownloadable={this.props.areAssetsDownloadable}
+                            areAssetsEditable={this.props.areAssetsEditable}/>
+                        <input
+                            multiple={this.props.multiple}
+                            ref="fileinput"
+                            type="file"
+                            style={{
+                                display: 'none',
+                                height: 0,
+                                width: 0
+                            }}
+                            onChange={this.handleDrop} />
+                </div>
+          );
+        }
     }
 });
 

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
         };
     },
 
@@ -495,7 +496,10 @@ var ReactS3FineUploader = React.createClass({
         // md5 hash of a file locally and just upload a txt file containing that hash.
         // 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() {