add pause and play functionality

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"

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() {

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 (

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;

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: {

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>