From d52a89cd3ef3e380b1f93356e2ea58fd79b60fa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 27 Jul 2015 15:34:45 +0200
Subject: [PATCH 1/3] only display hashing toggle on user permissions

---
 .../ascribe_forms/form_register_piece.js      |  2 +-
 .../ascribe_uploader/file_drag_and_drop.js    |  4 ++--
 .../file_drag_and_drop_dialog.js              |  6 ++---
 .../react_s3_fine_uploader.js                 | 23 +++++++++++++------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 3d97eb06..4b3ebe81 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -174,7 +174,7 @@ let FileUploader = React.createClass({
                     }
                 }}
                 multiple={false}
-                localHashing={false} />
+                enableLocalHashing={true} />
         );
     }
 });
diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 6e6feac1..51999e94 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -30,7 +30,7 @@ let FileDragAndDrop = React.createClass({
         areAssetsDownloadable: React.PropTypes.bool,
         areAssetsEditable: React.PropTypes.bool,
 
-        localHashing: React.PropTypes.bool,
+        enableLocalHashing: React.PropTypes.bool,
 
         // triggers a FileDragAndDrop-global spinner
         hashingProgress: React.PropTypes.number,
@@ -177,7 +177,7 @@ let FileDragAndDrop = React.createClass({
                             multipleFiles={this.props.multiple}
                             hasFiles={hasFiles}
                             onClick={this.handleOnClick}
-                            localHashing={this.props.localHashing}/>
+                            enableLocalHashing={this.props.enableLocalHashing}/>
                         <FileDragAndDropPreviewIterator
                             files={this.props.filesToUpload}
                             handleDeleteFile={this.handleDeleteFile}
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
index 397ac0a1..306eb6f1 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
@@ -3,8 +3,6 @@
 import React from 'react';
 import Router from 'react-router';
 
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
-
 import { getLangText } from '../../utils/lang_utils';
 
 let Link = Router.Link;
@@ -14,7 +12,7 @@ let FileDragAndDropDialog = React.createClass({
         hasFiles: React.PropTypes.bool,
         multipleFiles: React.PropTypes.bool,
         onClick: React.PropTypes.func,
-        localHashing: React.PropTypes.bool
+        enableLocalHashing: React.PropTypes.bool
     },
 
     mixins: [Router.State],
@@ -25,7 +23,7 @@ let FileDragAndDropDialog = React.createClass({
         if(this.props.hasFiles) {
             return null;
         } else {
-            if(!queryParams.method) {
+            if(this.props.enableLocalHashing && !queryParams.method) {
 
                 let queryParamsHash = Object.assign({}, queryParams);
                 queryParamsHash.method = 'hash';
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index a3b2bc63..cdc91b16 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react/addons';
+import Router from 'react-router';
 import Raven from 'raven-js';
 import Q from 'q';
 
@@ -106,9 +107,14 @@ var ReactS3FineUploader = React.createClass({
         // the file in the browser using md5 and then uploading the resulting text document instead
         // of the actual file.
         // This boolean essentially enables that behavior
-        localHashing: React.PropTypes.bool
+        enableLocalHashing: React.PropTypes.bool,
+
+        // automatically injected by React-Router
+        query: React.PropTypes.object
     },
 
+    mixins: [Router.State],
+
     getDefaultProps() {
         return {
             autoUpload: true,
@@ -167,10 +173,10 @@ var ReactS3FineUploader = React.createClass({
         };
     },
 
-    // since the csrf header is defined in this component's props,
-    // everytime the csrf cookie is changed we'll need to reinitalize
-    // fineuploader and update the actual csrf token
     componentWillUpdate() {
+        // since the csrf header is defined in this component's props,
+        // everytime the csrf cookie is changed we'll need to reinitalize
+        // fineuploader and update the actual csrf token
         let potentiallyNewCSRFToken = getCookie(AppConstants.csrftoken);
         if(this.state.csrfToken !== potentiallyNewCSRFToken) {
             this.setState({
@@ -511,8 +517,11 @@ var ReactS3FineUploader = React.createClass({
 
         // As mentioned already in the propTypes declaration, in some instances we need to calculate the
         // 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) {
+        //
+        // In the view this only happens when the user is allowed to do local hashing as well
+        // as when the correct query parameter is present in the url ('hash' and not 'upload')
+        let queryParams = this.getQuery();
+        if(this.props.enableLocalHashing && queryParams && queryParams.method === 'hash') {
 
             let convertedFilePromises = [];
             let overallFileSize = 0;
@@ -704,7 +713,7 @@ var ReactS3FineUploader = React.createClass({
                     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}
                     hashingProgress={this.state.hashingProgress}
-                    localHashing={this.props.localHashing} />
+                    enableLocalHashing={this.props.enableLocalHashing} />
             </div>
         );
     }

From 332366ec1587906496e52f72c24647df2559f336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 27 Jul 2015 16:00:54 +0200
Subject: [PATCH 2/3] Integrate dropzone inactivity into user flow

---
 .../ascribe_uploader/file_drag_and_drop.js          |  4 ++++
 .../ascribe_uploader/react_s3_fine_uploader.js      | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 51999e94..ad176487 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -82,6 +82,10 @@ let FileDragAndDrop = React.createClass({
         event.stopPropagation();
         let files;
 
+        if(this.props.dropzoneInactive) {
+            return;
+        }
+
         // handle Drag and Drop
         if(event.dataTransfer && event.dataTransfer.files.length > 0) {
             files = event.dataTransfer.files;
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index cdc91b16..9b40e6cb 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -695,6 +695,17 @@ var ReactS3FineUploader = React.createClass({
         this.setState(newState);
     },
 
+    isDropzoneInactive() {
+        let filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
+        let queryParams = this.getQuery();
+
+        if((this.props.enableLocalHashing && !queryParams.method) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+
+    },
 
     render() {
         return (
@@ -711,7 +722,7 @@ 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.isDropzoneInactive()}
                     hashingProgress={this.state.hashingProgress}
                     enableLocalHashing={this.props.enableLocalHashing} />
             </div>

From 21fc2cee28c99e85da1f6c96142b720f971a2360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 27 Jul 2015 16:37:54 +0200
Subject: [PATCH 3/3] convert cancel hashing action to anchor

---
 js/components/ascribe_uploader/file_drag_and_drop.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index ad176487..9606f552 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -161,7 +161,7 @@ let FileDragAndDrop = React.createClass({
                     <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}> {getLangText('Cancel hashing')}</span>
+                        <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
                     </p>
                     <ProgressBar completed={this.props.hashingProgress} color="#48DACB"/>
                 </div>