From 38751ae6122d5f8333baa6c2985f42d3a309e226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 24 Jul 2015 15:13:20 +0200
Subject: [PATCH] add user interface feedback

---
 js/components/ascribe_uploader/file_drag_and_drop.js  |  8 +++-----
 .../ascribe_uploader/react_s3_fine_uploader.js        | 11 ++++++++---
 sass/ascribe_uploader.scss                            |  2 +-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 41385f76..d12f08d8 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import ProgressBar from 'react-progressbar';
 
 import FileDragAndDropDialog from './file_drag_and_drop_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
@@ -151,11 +152,8 @@ let FileDragAndDrop = React.createClass({
             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"
-                        src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                    <p>{Math.ceil(this.props.hashingProgress)}%</p>
+                    <ProgressBar completed={this.props.hashingProgress} color="#48DACB"/>
                 </div>
             );
         } else {
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 4fbca555..2636e381 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -151,7 +151,7 @@ var ReactS3FineUploader = React.createClass({
                 }
                 return name;
             },
-            multiple: true,
+            multiple: false,
             defaultErrorMessage: getLangText('Unexpected error. Please contact us if this happens repeatedly.')
         };
     },
@@ -528,7 +528,8 @@ var ReactS3FineUploader = React.createClass({
                     // update file's progress
                     files[index].progress = value;
 
-                    // calculate overall 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;
@@ -536,11 +537,15 @@ var ReactS3FineUploader = React.createClass({
                         overallHashingProgress += filesSliceOfOverall * files[i].progress;
                     }
 
-                    this.setState({ hashingProgress: overallHashingProgress });
+                    // Multiply by 100, since react-progressbar expects decimal numbers
+                    this.setState({ hashingProgress: overallHashingProgress * 100});
 
                 })
                 .then((convertedFiles) => {
 
+                    // clear hashing progress, since its done
+                    this.setState({ hashingProgress: -1});
+
                     // actually replacing all files with their txt-hash representative
                     files = convertedFiles;
 
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index ceb8b427..3f9e7e30 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -10,7 +10,7 @@
 
     cursor: default !important;
 
-    padding: 1.5em 1.5em 1.5em 0;
+    padding: 1.5em 0 1.5em 0;
 }
 
 .inactive-dropzone {