From a66a4e1c9f6713f391074d2951f70758c4c4a559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 29 Jun 2015 17:37:14 +0200
Subject: [PATCH 1/8] add pause and play functionality

---
 .../ascribe_uploader/file_drag_and_drop.js    | 20 ++++++++++-
 .../file_drag_and_drop_preview.js             | 10 ++++--
 .../file_drag_and_drop_preview_image.js       | 16 ++++++---
 .../file_drag_and_drop_preview_iterator.js    |  8 +++--
 .../file_drag_and_drop_preview_other.js       |  1 -
 .../react_s3_fine_uploader.js                 | 33 +++++++++++++++++++
 6 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 7db49192..96347157 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -19,6 +19,8 @@ var FileDragAndDrop = React.createClass({
         filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
+        handlePauseFile: React.PropTypes.func,
+        handleResumeFile: React.PropTypes.func,
         multiple: React.PropTypes.bool,
         dropzoneInactive: React.PropTypes.bool
     },
@@ -93,6 +95,20 @@ var FileDragAndDrop = React.createClass({
         this.props.handleCancelFile(fileId);
     },
 
+    handlePauseFile(fileId) {
+        // input's value is not change the second time someone
+        // inputs the same file again, therefore we need to reset its value
+        this.refs.fileinput.getDOMNode().value = '';
+        this.props.handlePauseFile(fileId);
+    },
+
+    handleResumeFile(fileId) {
+        // input's value is not change the second time someone
+        // inputs the same file again, therefore we need to reset its value
+        this.refs.fileinput.getDOMNode().value = '';
+        this.props.handleResumeFile(fileId);
+    },
+
     handleOnClick() {
         // when multiple is set to false and the user already uploaded a piece,
         // do not propagate event
@@ -128,7 +144,9 @@ var FileDragAndDrop = React.createClass({
                     <FileDragAndDropPreviewIterator
                         files={this.props.filesToUpload}
                         handleDeleteFile={this.handleDeleteFile}
-                        handleCancelFile={this.handleCancelFile}/>
+                        handleCancelFile={this.handleCancelFile}
+                        handlePauseFile={this.handlePauseFile}
+                        handleResumeFile={this.handleResumeFile}/>
                     <input
                         multiple={this.props.multiple}
                         ref="fileinput"
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index 82509f48..f9054283 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -14,11 +14,17 @@ let FileDragAndDropPreview = React.createClass({
             type: React.PropTypes.string
         }).isRequired,
         handleDeleteFile: React.PropTypes.func,
-        handleCancelFile: React.PropTypes.func
+        handleCancelFile: React.PropTypes.func,
+        handlePauseFile: React.PropTypes.func,
+        handleResumeFile: React.PropTypes.func
     },
 
     toggleUploadProcess() {
-
+        if(this.props.file.status === 'uploading') {
+            this.props.handlePauseFile(this.props.file.id);
+        } else if(this.props.file.status === 'paused') {
+            this.props.handleResumeFile(this.props.file.id);
+        }
     },
 
     handleDeleteFile() {
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
index 9dd4e122..0f694af0 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
@@ -3,6 +3,8 @@
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
+import AppConstants from '../../constants/application_constants';
+
 let FileDragAndDropPreviewImage = React.createClass({
     propTypes: {
         progress: React.PropTypes.number,
@@ -33,12 +35,14 @@ let FileDragAndDropPreviewImage = React.createClass({
         e.stopPropagation();
 
         this.setState({
-            paused: true
+            paused: !this.state.paused
         });
+
+        this.props.toggleUploadProcess();
     },
 
     downloadFile() {
-
+        console.log('implement this');
     },
 
     render() {
@@ -49,12 +53,14 @@ let FileDragAndDropPreviewImage = React.createClass({
 
         let actionSymbol;
         
-        if(this.props.progress !== 100 && this.state.paused) {
+        if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
             actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
-        } else if(this.props.progress !== 100 && !this.state.paused) {
+        } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
             actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
-        } else {
+        } else if(this.props.progress === 100) {
             actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
+        } else {
+            actionSymbol = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
         }
 
         return (
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
index 4961ed0c..46a16b7e 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
@@ -8,7 +8,9 @@ let FileDragAndDropPreviewIterator = React.createClass({
     propTypes: {
         files: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
-        handleCancelFile: React.PropTypes.func
+        handleCancelFile: React.PropTypes.func,
+        handlePauseFile: React.PropTypes.func,
+        handleResumeFile: React.PropTypes.func
     },
 
     render() {
@@ -22,7 +24,9 @@ let FileDragAndDropPreviewIterator = React.createClass({
                                     key={i}
                                     file={file}
                                     handleDeleteFile={this.props.handleDeleteFile}
-                                    handleCancelFile={this.props.handleCancelFile}/>
+                                    handleCancelFile={this.props.handleCancelFile}
+                                    handlePauseFile={this.props.handlePauseFile}
+                                    handleResumeFile={this.props.handleResumeFile}/>
                             );
                         } else {
                             return null;
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
index fe6c76ba..14a9af45 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
@@ -3,7 +3,6 @@
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
-import AppConstants from '../../constants/application_constants';
 
 let FileDragAndDropPreviewOther = React.createClass({
     propTypes: {
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 04e0a804..a305d6dd 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -349,6 +349,23 @@ var ReactS3FineUploader = React.createClass({
         this.state.uploader.cancel(fileId);
     },
 
+    handlePauseFile(fileId) {
+        if(this.state.uploader.pauseUpload(fileId)) {
+            this.setStatusOfFile(fileId, 'paused');
+        } else {
+            throw new Error('File upload could not be paused.');
+        }
+        
+    },
+
+    handleResumeFile(fileId) {
+        if(this.state.uploader.continueUpload(fileId)) {
+            this.setStatusOfFile(fileId, 'uploading');
+        } else {
+            throw new Error('File upload could not be resumed.');
+        }
+    },
+
     handleUploadFile(files) {
 
         // If multiple set and user already uploaded its work,
@@ -418,6 +435,20 @@ var ReactS3FineUploader = React.createClass({
         this.setState(newState);
     },
 
+    setStatusOfFile(fileId, status) {
+        // also, sync files from state with the ones from fineuploader
+        let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
+
+        // splice because I can
+        filesToUpload[fileId].status = status;
+
+        // set state
+        let newState = React.addons.update(this.state, {
+            filesToUpload: { $set: filesToUpload }
+        });
+        this.setState(newState);
+    },
+
     render() {
         return (
             <div>
@@ -427,6 +458,8 @@ var ReactS3FineUploader = React.createClass({
                     filesToUpload={this.state.filesToUpload}
                     handleDeleteFile={this.handleDeleteFile}
                     handleCancelFile={this.handleCancelFile}
+                    handlePauseFile={this.handlePauseFile}
+                    handleResumeFile={this.handleResumeFile}
                     multiple={this.props.multiple}
                     dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
             </div>

From 52db729a4d748f6a775fa3d57e99b532474cd561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 29 Jun 2015 17:59:35 +0200
Subject: [PATCH 2/8] readd delete functionality

---
 .../file_drag_and_drop_preview.js             |  4 ++++
 .../react_s3_fine_uploader.js                 |  2 +-
 sass/ascribe_uploader.scss                    | 20 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index f9054283..5fbae1ca 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -32,6 +32,7 @@ let FileDragAndDropPreview = React.createClass({
         // don't run it
         // On the other hand, if the files progress is not yet at a 100%,
         // just run fineuploader.cancel
+        console.log(this.props.file);
         if(this.props.handleDeleteFile && this.props.file.progress === 100) {
             this.props.handleDeleteFile(this.props.file.id);
         } else if(this.props.handleCancelFile && this.props.file.progress !== 100) {
@@ -63,6 +64,9 @@ let FileDragAndDropPreview = React.createClass({
         return (
             <div
                 className="file-drag-and-drop-position">
+                <div className="delete-file">
+                    <span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
+                </div>
                 {previewElement}
             </div>
         );
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index e8d86a1b..99894486 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -242,7 +242,7 @@ var ReactS3FineUploader = React.createClass({
         this.setState(newState);
         this.createBlob(files[id]);
         this.props.submitKey(files[id].key);
-        
+
         // also, lets check if after the completion of this upload,
         // the form is ready for submission or not
         if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 29dbe39a..892c6235 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -43,9 +43,29 @@
 }
 
 .file-drag-and-drop-position {
+    position: relative;
     display: inline-block;
     margin: 0 0 4% 4%;
     float:left;
+
+    .delete-file {
+        display: block;
+        background-color: black;
+        
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        right: -7px;
+        top: -7px;
+        border-radius: 1em;
+        text-align: center;
+
+        cursor: pointer;
+
+        span {
+            color: white;
+        }
+    }
 }
 
 .file-drag-and-drop-preview-table-wrapper {

From 31e3c23302f2f43c6a71f2eeb7d763273999787a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 30 Jun 2015 09:20:20 +0200
Subject: [PATCH 3/8] rename upload status variable

---
 .../react_s3_fine_uploader.js                 | 14 +++++-----
 js/components/edition.js                      | 10 +++----
 js/components/register_piece.js               | 28 ++++++++-----------
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 99894486..c923d070 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -82,7 +82,7 @@ var ReactS3FineUploader = React.createClass({
         retry: React.PropTypes.shape({
             enableAuto: React.PropTypes.bool
         }),
-        setUploadStatus: React.PropTypes.func,
+        setIsUploadReady: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func
     },
 
@@ -247,9 +247,9 @@ var ReactS3FineUploader = React.createClass({
         // the form is ready for submission or not
         if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
             // if so, set uploadstatus to true
-            this.props.setUploadStatus(true);
+            this.props.setIsUploadReady(true);
         } else {
-            this.props.setUploadStatus(false);
+            this.props.setIsUploadReady(false);
         }
     },
 
@@ -305,9 +305,9 @@ var ReactS3FineUploader = React.createClass({
 
         if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
             // if so, set uploadstatus to true
-            this.props.setUploadStatus(true);
+            this.props.setIsUploadReady(true);
         } else {
-            this.props.setUploadStatus(false);
+            this.props.setIsUploadReady(false);
         }
     },
 
@@ -324,9 +324,9 @@ var ReactS3FineUploader = React.createClass({
 
         if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
             // if so, set uploadstatus to true
-            this.props.setUploadStatus(true);
+            this.props.setIsUploadReady(true);
         } else {
-            this.props.setUploadStatus(false);
+            this.props.setIsUploadReady(false);
         }
     },
 
diff --git a/js/components/edition.js b/js/components/edition.js
index a7217f3d..6da52fe2 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -455,9 +455,9 @@ let EditionFurtherDetails = React.createClass({
         });
     },
 
-    setUploadStatus(isReady) {
+    setIsUploadReady(isReady) {
         this.setState({
-            uploadStatus: isReady
+            isUploadReady: isReady
         });
     },
 
@@ -495,7 +495,7 @@ let EditionFurtherDetails = React.createClass({
                         edition={this.props.edition} />
                     <FileUploader
                         submitKey={this.submitKey}
-                        setUploadStatus={this.setUploadStatus}
+                        setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={this.isReadyForFormSubmission}
                         edition={this.props.edition}/>
                 </Col>
@@ -506,7 +506,7 @@ let EditionFurtherDetails = React.createClass({
 
 let FileUploader = React.createClass({
     propTypes: {
-        setUploadStatus: React.PropTypes.func,
+        setIsUploadReady: React.PropTypes.func,
         submitKey: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func
     },
@@ -528,7 +528,7 @@ let FileUploader = React.createClass({
                     sizeLimit: '10000000'
                 }}
                 submitKey={this.props.submitKey}
-                setUploadStatus={this.props.setUploadStatus}
+                setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                 session={{
                     endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 258e3a36..a9414a23 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -26,7 +26,7 @@ let RegisterPiece = React.createClass( {
     getInitialState(){
         return {
             digitalWorkKey: null,
-            uploadStatus: false
+            isUploadReady: false
         };
     },
 
@@ -51,9 +51,9 @@ let RegisterPiece = React.createClass( {
         });
     },
 
-    setUploadStatus(isReady) {
+    setIsUploadReady(isReady) {
         this.setState({
-            uploadStatus: isReady
+            isUploadReady: isReady
         });
     },
 
@@ -67,15 +67,6 @@ let RegisterPiece = React.createClass( {
     },
 
     render() {
-        let buttons = null;
-
-        if (this.state.uploadStatus){
-            buttons = (
-                <button type="submit" className="btn ascribe-btn ascribe-btn-login">
-                    Register your artwork
-                </button>);
-        }
-
         return (
             <div className="row ascribe-row">
                 <div className="col-md-12">
@@ -85,7 +76,12 @@ let RegisterPiece = React.createClass( {
                         url={apiUrls.pieces_list}
                         getFormData={this.getFormData}
                         handleSuccess={this.handleSuccess}
-                        buttons={buttons}
+                        buttons={<button 
+                                    type="submit"
+                                    className="btn ascribe-btn ascribe-btn-login"
+                                    disabled={!this.state.isUploadReady}>
+                                    Register your artwork
+                                </button>}
                         spinner={
                             <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                                 <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
@@ -95,7 +91,7 @@ let RegisterPiece = React.createClass( {
                             label="Files to upload">
                             <FileUploader
                                 submitKey={this.submitKey}
-                                setUploadStatus={this.setUploadStatus}
+                                setIsUploadReady={this.setIsUploadReady}
                                 isReadyForFormSubmission={this.isReadyForFormSubmission}/>
                         </Property>
                         <Property
@@ -143,7 +139,7 @@ let RegisterPiece = React.createClass( {
 
 let FileUploader = React.createClass({
     propTypes: {
-        setUploadStatus: React.PropTypes.func,
+        setIsUploadReady: React.PropTypes.func,
         submitKey: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func
     },
@@ -163,7 +159,7 @@ let FileUploader = React.createClass({
                     itemLimit: 100000,
                     sizeLimit: '25000000000'
                 }}
-                setUploadStatus={this.props.setUploadStatus}
+                setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
         );
     }

From e7f29cd973ee09d436df21c8d960365982e8b11f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 30 Jun 2015 09:23:26 +0200
Subject: [PATCH 4/8] fix bug in edition detail

---
 js/components/edition.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/components/edition.js b/js/components/edition.js
index 6da52fe2..98ad87b2 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -506,6 +506,7 @@ let EditionFurtherDetails = React.createClass({
 
 let FileUploader = React.createClass({
     propTypes: {
+        edition: React.PropTypes.object,
         setIsUploadReady: React.PropTypes.func,
         submitKey: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func
@@ -536,7 +537,7 @@ let FileUploader = React.createClass({
                         'X-CSRFToken': getCookie('csrftoken')
                     },
                     params: {
-                        'pk': this.props.edition.other_data.id
+                        'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
                     }
                 }}/>
         );

From 1976dee57a73de9b99ca621ee259f44cee6619ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 30 Jun 2015 11:56:38 +0200
Subject: [PATCH 5/8] fix firefox simulate click issue

---
 .../ascribe_uploader/file_drag_and_drop.js     | 18 +++++++++++++-----
 .../file_drag_and_drop_preview.js              |  1 -
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 96347157..3998eff1 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -4,8 +4,10 @@ import React from 'react';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 
+let ReactTestUtils = React.addons.TestUtils;
+
 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
-var FileDragAndDrop = React.createClass({
+let FileDragAndDrop = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         onDragStart: React.PropTypes.func,
@@ -116,10 +118,16 @@ var FileDragAndDrop = React.createClass({
             return;
         }
 
-        // Simulate click on hidden file input
-        var event = document.createEvent('HTMLEvents');
-        event.initEvent('click', false, true);
-        this.refs.fileinput.getDOMNode().dispatchEvent(event);
+        // Firefox only recognizes the simulated mouse click if bubbles is set to true,
+        // but since Google Chrome propagates the event much further than needed, we
+        // need to stop propagation as soon as the event is created
+        var evt = new MouseEvent("click", {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        });
+        evt.stopPropagation();
+        this.refs.fileinput.getDOMNode().dispatchEvent(evt);
     },
 
     render: function () {
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index 5fbae1ca..64600b9d 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -32,7 +32,6 @@ let FileDragAndDropPreview = React.createClass({
         // don't run it
         // On the other hand, if the files progress is not yet at a 100%,
         // just run fineuploader.cancel
-        console.log(this.props.file);
         if(this.props.handleDeleteFile && this.props.file.progress === 100) {
             this.props.handleDeleteFile(this.props.file.id);
         } else if(this.props.handleCancelFile && this.props.file.progress !== 100) {

From ea47f7a371983e41886c4c5d4a63e5c57addf5ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 30 Jun 2015 13:32:41 +0200
Subject: [PATCH 6/8] add place holder for empty piece list

---
 js/components/ascribe_accordion_list/accordion_list.js | 4 ++++
 js/components/ascribe_uploader/file_drag_and_drop.js   | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js
index 854e08bf..4fa7d9d9 100644
--- a/js/components/ascribe_accordion_list/accordion_list.js
+++ b/js/components/ascribe_accordion_list/accordion_list.js
@@ -16,6 +16,10 @@ let AccordionList = React.createClass({
                     {this.props.children}
                 </div>
             );
+        } else if(this.props.itemList.length === 0) {
+            return (
+                <p className="text-center">You don't have any works yet...</p>
+            );
         } else {
             return (
                 <div className={this.props.className + ' ascribe-accordion-list-loading'}>
diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 3998eff1..8a06d880 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -121,10 +121,10 @@ let FileDragAndDrop = React.createClass({
         // Firefox only recognizes the simulated mouse click if bubbles is set to true,
         // but since Google Chrome propagates the event much further than needed, we
         // need to stop propagation as soon as the event is created
-        var evt = new MouseEvent("click", {
+        var evt = new MouseEvent('click', {
             view: window,
             bubbles: true,
-            cancelable: true,
+            cancelable: true
         });
         evt.stopPropagation();
         this.refs.fileinput.getDOMNode().dispatchEvent(evt);

From 8c3dfc4b73b4b77c5b7711d9e99a4aff5e6e6989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 30 Jun 2015 13:53:02 +0200
Subject: [PATCH 7/8] made download functionality optional

---
 .../ascribe_uploader/file_drag_and_drop.js    |  6 ++-
 .../file_drag_and_drop_preview.js             |  9 ++--
 .../file_drag_and_drop_preview_image.js       | 24 +++++------
 .../file_drag_and_drop_preview_iterator.js    |  6 ++-
 .../file_drag_and_drop_preview_other.js       | 41 +++++++++++++++----
 .../react_s3_fine_uploader.js                 |  4 +-
 js/components/edition.js                      |  5 ++-
 js/components/register_piece.js               |  3 +-
 8 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 8a06d880..5879a2ef 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -24,7 +24,8 @@ let FileDragAndDrop = React.createClass({
         handlePauseFile: React.PropTypes.func,
         handleResumeFile: React.PropTypes.func,
         multiple: React.PropTypes.bool,
-        dropzoneInactive: React.PropTypes.bool
+        dropzoneInactive: React.PropTypes.bool,
+        areAssetsDownloadable: React.PropTypes.bool
     },
 
     handleDragStart(event) {
@@ -154,7 +155,8 @@ let FileDragAndDrop = React.createClass({
                         handleDeleteFile={this.handleDeleteFile}
                         handleCancelFile={this.handleCancelFile}
                         handlePauseFile={this.handlePauseFile}
-                        handleResumeFile={this.handleResumeFile}/>
+                        handleResumeFile={this.handleResumeFile}
+                        areAssetsDownloadable={this.props.areAssetsDownloadable}/>
                     <input
                         multiple={this.props.multiple}
                         ref="fileinput"
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index 64600b9d..66158f25 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -16,7 +16,8 @@ let FileDragAndDropPreview = React.createClass({
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
-        handleResumeFile: React.PropTypes.func
+        handleResumeFile: React.PropTypes.func,
+        areAssetsDownloadable: React.PropTypes.bool
     },
 
     toggleUploadProcess() {
@@ -51,13 +52,15 @@ let FileDragAndDropPreview = React.createClass({
                                 onClick={this.handleDeleteFile}
                                 progress={this.props.file.progress}
                                 url={this.props.file.url}
-                                toggleUploadProcess={this.toggleUploadProcess}/>);
+                                toggleUploadProcess={this.toggleUploadProcess}
+                                areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
         } else {
             previewElement = (<FileDragAndDropPreviewOther
                                 onClick={this.handleDeleteFile}
                                 progress={this.props.file.progress}
                                 type={this.props.file.type.split('/')[1]}
-                                toggleUploadProcess={this.toggleUploadProcess}/>);
+                                toggleUploadProcess={this.toggleUploadProcess}
+                                areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
         }
 
         return (
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
index 0f694af0..82e87521 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
@@ -10,7 +10,8 @@ let FileDragAndDropPreviewImage = React.createClass({
         progress: React.PropTypes.number,
         url: React.PropTypes.string,
         toggleUploadProcess: React.PropTypes.func,
-        downloadFile: React.PropTypes.func
+        downloadFile: React.PropTypes.func,
+        areAssetsDownloadable: React.PropTypes.bool
     },
 
     getInitialState() {
@@ -19,17 +20,6 @@ let FileDragAndDropPreviewImage = React.createClass({
         };
     },
 
-    /*onClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        this.setState({
-            loading: true
-        });
-
-        this.props.onClick(e);
-    },*/
-
     toggleUploadProcess(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -58,9 +48,15 @@ let FileDragAndDropPreviewImage = React.createClass({
         } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
             actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
         } else if(this.props.progress === 100) {
-            actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
+
+            // only if assets are actually downloadable, there should be a download icon if the process is already at
+            // 100%. If not, no actionSymbol should be displayed
+            if(this.props.areAssetsDownloadable) {
+                actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
+            }
+
         } else {
-            actionSymbol = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+            actionSymbol = <img height={35} className="action-file" src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
         }
 
         return (
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
index 46a16b7e..8d8171ff 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
@@ -10,7 +10,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
-        handleResumeFile: React.PropTypes.func
+        handleResumeFile: React.PropTypes.func,
+        areAssetsDownloadable: React.PropTypes.bool
     },
 
     render() {
@@ -26,7 +27,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
                                     handleDeleteFile={this.props.handleDeleteFile}
                                     handleCancelFile={this.props.handleCancelFile}
                                     handlePauseFile={this.props.handlePauseFile}
-                                    handleResumeFile={this.props.handleResumeFile}/>
+                                    handleResumeFile={this.props.handleResumeFile}
+                                    areAssetsDownloadable={this.props.areAssetsDownloadable}/>
                             );
                         } else {
                             return null;
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
index 14a9af45..af67b569 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
@@ -3,40 +3,65 @@
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
+import AppConstants from '../../constants/application_constants';
 
 let FileDragAndDropPreviewOther = React.createClass({
     propTypes: {
         type: React.PropTypes.string,
         progress: React.PropTypes.number,
-        onClick: React.PropTypes.func
+        areAssetsDownloadable: React.PropTypes.bool,
+        toggleUploadProcess: React.PropTypes.func,
+        downloadFile: React.PropTypes.func,
     },
 
     getInitialState() {
         return {
-            loading: false
+            paused: true
         };
     },
 
-    onClick(e) {
+    toggleUploadProcess(e) {
         e.preventDefault();
         e.stopPropagation();
-        
+
         this.setState({
-            loading: true
+            paused: !this.state.paused
         });
 
-        this.props.onClick(e);
+        this.props.toggleUploadProcess();
+    },
+
+    downloadFile() {
+        console.log('implement this');
     },
 
     render() {
-        //let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
+
+        let actionSymbol;
+        
+        if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
+            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
+        } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
+            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
+        } else if(this.props.progress === 100) {
+
+            // only if assets are actually downloadable, there should be a download icon if the process is already at
+            // 100%. If not, no actionSymbol should be displayed
+            if(this.props.areAssetsDownloadable) {
+                actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
+            }
+
+        } else {
+            actionSymbol = <img height={35} src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+        }
+
         return (
             <div
                 className="file-drag-and-drop-preview">
                 <ProgressBar completed={this.props.progress} color="black"/>
                 <div className="file-drag-and-drop-preview-table-wrapper">
                     <div className="file-drag-and-drop-preview-other">
-                        <span className="glyphicon glyphicon-pause delete-file" aria-hidden="true" title="Delete or cancel upload"/>
+                        {actionSymbol}
                         <span>{'.' + this.props.type}</span>
                     </div>
                 </div>
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index c923d070..534702b3 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -83,7 +83,8 @@ var ReactS3FineUploader = React.createClass({
             enableAuto: React.PropTypes.bool
         }),
         setIsUploadReady: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func
+        isReadyForFormSubmission: React.PropTypes.func,
+        areAssetsDownloadable: React.PropTypes.bool
     },
 
     getDefaultProps() {
@@ -463,6 +464,7 @@ var ReactS3FineUploader = React.createClass({
                     handlePauseFile={this.handlePauseFile}
                     handleResumeFile={this.handleResumeFile}
                     multiple={this.props.multiple}
+                    areAssetsDownloadable={this.props.areAssetsDownloadable}
                     dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
             </div>
         );
diff --git a/js/components/edition.js b/js/components/edition.js
index 98ad87b2..3d2193ae 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -253,7 +253,7 @@ let EditionSummary = React.createClass({
                 <Row>
                     <Col md={12}>
                         <AclButtonList
-                            className="pull-left"
+                            className="text-center"
                             availableAcls={this.props.edition.acl}
                             editions={[this.props.edition]}
                             handleSuccess={this.handleSuccess} />
@@ -539,7 +539,8 @@ let FileUploader = React.createClass({
                     params: {
                         'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
                     }
-                }}/>
+                }}
+                areAssetsDownloadable={true}/>
         );
     }
 });
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 0e12f95e..2e7fc184 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -212,7 +212,8 @@ let FileUploader = React.createClass({
                     sizeLimit: '25000000000'
                 }}
                 setIsUploadReady={this.props.setIsUploadReady}
-                isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                areAssetsDownloadable={false}/>
         );
     }
 });

From 9ce6c45690453027131f3d37df04ae0dbc43c503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 30 Jun 2015 15:41:39 +0200
Subject: [PATCH 8/8] add sessions for already uploaded files and implement
 manual deletion

---
 js/actions/coa_actions.js                     |  2 -
 .../react_s3_fine_uploader.js                 | 65 +++++++++++++++++--
 js/constants/api_urls.js                      |  3 +-
 js/fetchers/s3_fetcher.js                     | 17 +++++
 js/utils/fetch_api_utils.js                   | 35 ++++++++++
 5 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 js/fetchers/s3_fetcher.js

diff --git a/js/actions/coa_actions.js b/js/actions/coa_actions.js
index b475aeb7..ed8971d3 100644
--- a/js/actions/coa_actions.js
+++ b/js/actions/coa_actions.js
@@ -15,7 +15,6 @@ class CoaActions {
         CoaFetcher.fetchOne(id)
             .then((res) => {
                 this.actions.updateCoa(res.coa);
-                console.log(res.coa);
             })
             .catch((err) => {
                 console.log(err);
@@ -25,7 +24,6 @@ class CoaActions {
         CoaFetcher.create(edition.bitcoin_id)
             .then((res) => {
                 this.actions.updateCoa(res.coa);
-                console.log(res.coa);
             })
             .catch((err) => {
                 console.log(err);
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 534702b3..ec13c9f6 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -9,6 +9,7 @@ import fetch from 'isomorphic-fetch';
 import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
+import S3Fetcher from '../../fetchers/s3_fetcher';
 
 import fineUploader from 'fineUploader';
 import FileDragAndDrop from './file_drag_and_drop';
@@ -184,7 +185,8 @@ var ReactS3FineUploader = React.createClass({
                 onRetry: this.onRetry,
                 onAutoRetry: this.onAutoRetry,
                 onManualRetry: this.onManualRetry,
-                onDeleteComplete: this.onDeleteComplete
+                onDeleteComplete: this.onDeleteComplete,
+                onSessionRequestComplete: this.onSessionRequestComplete
             }
         };
     },
@@ -332,7 +334,7 @@ var ReactS3FineUploader = React.createClass({
     },
 
     onProgress(id, name, uploadedBytes, totalBytes) {
-        var newState = React.addons.update(this.state, {
+        let newState = React.addons.update(this.state, {
             filesToUpload: { [id]: {
                 progress: { $set: (uploadedBytes / totalBytes) * 100} }
             }
@@ -340,12 +342,61 @@ var ReactS3FineUploader = React.createClass({
         this.setState(newState);
     },
 
+    onSessionRequestComplete(response, success) {
+        if(success) {
+            // fetch blobs for images
+            response = response.map((file) => {
+                file.url = file.s3Url;
+                file.status = 'online';
+                file.progress = 100;
+                return file;
+            });
+
+            // add file to filesToUpload
+            let updatedFilesToUpload = this.state.filesToUpload.concat(response);
+
+            // refresh all files ids,
+            updatedFilesToUpload = updatedFilesToUpload.map((file, i) => {
+                file.id = i;
+                return file;
+            });
+
+            let newState = React.addons.update(this.state, {filesToUpload: {$set: updatedFilesToUpload}});
+            this.setState(newState);
+        } else {
+            let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'success', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            throw new Error('The session request failed', response);
+        }
+    },
+
     handleDeleteFile(fileId) {
-        // delete file from server
-        this.state.uploader.deleteFile(fileId);
-        // this is being continues in onDeleteFile, as
-        // fineuploaders deleteFile does not return a correct callback or
-        // promise
+        // In some instances (when the file was already uploaded and is just displayed to the user)
+        // fineuploader does not register an id on the file (we do, don't be confused by this!).
+        // Since you can only delete a file by its id, we have to implement this method ourselves
+        // 
+        //  So, if an id is not present, we delete the file manually
+        //  To check which files are already uploaded from previous sessions we check their status.
+        //  If they are, it is "online"
+
+        if(this.state.filesToUpload[fileId].status !== 'online') {
+            // delete file from server
+            this.state.uploader.deleteFile(fileId);
+            // this is being continues in onDeleteFile, as
+            // fineuploaders deleteFile does not return a correct callback or
+            // promise
+        } else {
+            let fileToDelete = this.state.filesToUpload[fileId];
+            S3Fetcher
+                .deleteFile(fileToDelete.s3Key, fileToDelete.s3Bucket)
+                .then((res) => {
+                    console.log(res);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        }
     },
 
     handleCancelFile(fileId) {
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index 46626f2d..97da32e2 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -40,7 +40,8 @@ let apiUrls = {
     'users_signup': AppConstants.apiEndpoint + 'users/',
     'users_username': AppConstants.apiEndpoint + 'users/username/',
     'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
-    'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/'
+    'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
+    'delete_s3_file': AppConstants.serverUrl + 's3/delete/'
 };
 
 export default apiUrls;
diff --git a/js/fetchers/s3_fetcher.js b/js/fetchers/s3_fetcher.js
new file mode 100644
index 00000000..e6f50b72
--- /dev/null
+++ b/js/fetchers/s3_fetcher.js
@@ -0,0 +1,17 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+let S3Fetcher = {
+    /**
+     * Fetch the registered applications of a user from the API.
+     */
+    deleteFile(key, bucket) {
+        return requests.delete('delete_s3_file', {
+            key,
+            bucket
+        });
+    }
+};
+
+export default S3Fetcher;
diff --git a/js/utils/fetch_api_utils.js b/js/utils/fetch_api_utils.js
index 68f8fe6d..a4939770 100644
--- a/js/utils/fetch_api_utils.js
+++ b/js/utils/fetch_api_utils.js
@@ -69,4 +69,39 @@ export function getCookie(name) {
     if (parts.length === 2) {
         return parts.pop().split(';').shift();
     }
+}
+
+/*
+
+    Given a url for an image, this method fetches it and returns a promise that resolves to
+    a blob object.
+    It can be used to create a 64base encoded data url.
+
+    Taken from: http://jsfiddle.net/jan_miksovsky/yy7zs/
+
+ */
+export function fetchImageAsBlob(url) {
+    return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+
+        xhr.open('GET', url, true);
+
+        // Ask for the result as an ArrayBuffer.
+        xhr.responseType = 'arraybuffer';
+
+        xhr.onreadystatechange = function() {
+            if(xhr.readyState === 4 && xhr.status >= 400) {
+                reject(xhr.statusText);
+            }
+        };
+
+        xhr.onload = function() {
+            // Obtain a blob: URL for the image data.
+            let arrayBufferView = new Uint8Array(this.response);
+            let blob = new Blob([arrayBufferView], {type: 'image/jpeg'});
+            resolve(blob);
+        };
+
+        xhr.send();
+    });
 }
\ No newline at end of file