implement cancel functionality

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -17,6 +17,7 @@ var FileDragAndDrop = React.createClass({
         onDragEnd: React.PropTypes.func,
         filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
+        handleCancelFile: React.PropTypes.func,
         multiple: React.PropTypes.bool,
         dropzoneInactive: React.PropTypes.bool
     },
@@ -85,6 +86,13 @@ var FileDragAndDrop = React.createClass({
         this.props.handleDeleteFile(fileId);
     },
 
+    handleCancelFile(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.handleCancelFile(fileId);
+    },
+
     handleOnClick() {
         // when multiple is set to false and the user already uploaded a piece,
         // do not propagate event
@@ -117,7 +125,8 @@ var FileDragAndDrop = React.createClass({
                     {hasFiles ? null : this.props.multiple ? <span>Click or drag to add files</span> : <span>Click or drag to add a file</span>}
                     <FileDragAndDropPreviewIterator
                         files={this.props.filesToUpload}
-                        handleDeleteFile={this.handleDeleteFile}/>
+                        handleDeleteFile={this.handleDeleteFile}
+                        handleCancelFile={this.handleCancelFile}/>
                     <input
                         multiple={this.props.multiple}
                         ref="fileinput"

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -13,7 +13,8 @@ let FileDragAndDropPreview = React.createClass({
             url: React.PropTypes.string,
             type: React.PropTypes.string
         }).isRequired,
-        handleDeleteFile: React.PropTypes.func
+        handleDeleteFile: React.PropTypes.func,
+        handleCancelFile: React.PropTypes.func
     },
 
     handleDeleteFile(event) {
@@ -22,8 +23,12 @@ let FileDragAndDropPreview = React.createClass({
 
         // handleDeleteFile is optional, so if its not submitted,
         // don't run it
-        if(this.props.handleDeleteFile) {
+        // On the other hand, if the files progress is not yet at a 100%,
+        // just run fineuploader.cancel
+        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) {
+            this.props.handleCancelFile(this.props.file.id);
         }
     },
 

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -18,11 +18,15 @@ let FileDragAndDropPreviewImage = React.createClass({
 
         return (
             <div
-                onClick={this.props.onClick}
                 className="file-drag-and-drop-preview-image"
                 style={imageStyle}>
                     <ProgressBar completed={this.props.progress} color="black"/>
-                    {this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
+                    <span 
+                        className="glyphicon glyphicon-remove delete-file"
+                        aria-hidden="true"
+                        title="Delete"
+                        onClick={this.props.onClick}>
+                    </span>
             </div>
         );
     }

js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js

@@ -7,7 +7,8 @@ import FileDragAndDropPreview from './file_drag_and_drop_preview';
 let FileDragAndDropPreviewIterator = React.createClass({
     propTypes: {
         files: React.PropTypes.array,
-        handleDeleteFile: React.PropTypes.func
+        handleDeleteFile: React.PropTypes.func,
+        handleCancelFile: React.PropTypes.func
     },
 
     render() {
@@ -19,7 +20,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
                             <FileDragAndDropPreview
                                 key={i}
                                 file={file}
-                                handleDeleteFile={this.props.handleDeleteFile}/>
+                                handleDeleteFile={this.props.handleDeleteFile}
+                                handleCancelFile={this.props.handleCancelFile}/>
                         );
                     })}
                 </div>

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -13,12 +13,17 @@ let FileDragAndDropPreviewOther = React.createClass({
     render() {
         return (
             <div
-                onClick={this.props.onClick}
+                
                 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">
-                        {this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
+                        <span
+                            className="glyphicon glyphicon-remove delete-file"
+                            aria-hidden="true"
+                            title="Delete"
+                            onClick={this.props.onClick}>
+                        </span>
                         <span>{'.' + this.props.type}</span>
                     </div>
                 </div>

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -59,7 +59,8 @@ var ReactS3FineUploader = React.createClass({
         deleteFile: React.PropTypes.shape({
             enabled: React.PropTypes.bool,
             method: React.PropTypes.string,
-            endpoint: React.PropTypes.string
+            endpoint: React.PropTypes.string,
+            customHeaders: React.PropTypes.object
         }),
         session: React.PropTypes.shape({
             endpoint: React.PropTypes.bool
@@ -79,6 +80,7 @@ var ReactS3FineUploader = React.createClass({
     },
 
     getInitialState() {
+        console.log(this.props);
         return {
             filesToUpload: [],
             uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
@@ -109,6 +111,7 @@ var ReactS3FineUploader = React.createClass({
             callbacks: {
                 onSubmit: this.onSubmit,
                 onComplete: this.onComplete,
+                onCancel: this.onCancel,
                 onDelete: this.onDelete,
                 onSessionRequestComplete: this.onSessionRequestComplete,
                 onProgress: this.onProgress,
@@ -219,9 +222,11 @@ var ReactS3FineUploader = React.createClass({
         console.log('delete');
     },
 
-    onCancel() {
+    onCancel(id) {
-        console.log('cancel');
+        this.removeFileWithIdFromFilesToUpload(id);
-        // handle file removal here, for this.state.filesToUpload (same as in onDeleteComplete)
+
+        let notification = new GlobalNotificationModel('File upload canceled', 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     onSessionRequestComplete() {
@@ -233,17 +238,7 @@ var ReactS3FineUploader = React.createClass({
             let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         } else {
-            // also, sync files from state with the ones from fineuploader
+            this.removeFileWithIdFromFilesToUpload(id);
-            let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
-
-            // splice because I can
-            filesToUpload.splice(id, 1);
-
-            // set state
-            let newState = React.addons.update(this.state, {
-                filesToUpload: { $set: filesToUpload }
-            });
-            this.setState(newState);
 
             let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
             GlobalNotificationActions.appendGlobalNotification(notification);
@@ -267,6 +262,10 @@ var ReactS3FineUploader = React.createClass({
         // promise
     },
 
+    handleCancelFile(fileId) {
+        this.state.uploader.cancel(fileId);
+    },
+
     handleUploadFile(files) {
 
         // If multiple set and user already uploaded its work,
@@ -320,12 +319,27 @@ var ReactS3FineUploader = React.createClass({
         this.setState(newState);
     },
 
+    removeFileWithIdFromFilesToUpload(fileId) {
+        // also, sync files from state with the ones from fineuploader
+        let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
+
+        // splice because I can
+        filesToUpload.splice(fileId, 1);
+
+        // set state
+        let newState = React.addons.update(this.state, {
+            filesToUpload: { $set: filesToUpload }
+        });
+        this.setState(newState);
+    },
+
     render() {
         return (
             <FileDragAndDrop
                 onDrop={this.handleUploadFile}
                 filesToUpload={this.state.filesToUpload}
                 handleDeleteFile={this.handleDeleteFile}
+                handleCancelFile={this.handleCancelFile}
                 multiple={this.props.multiple}
                 dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
         );

js/components/register_piece.js

@@ -116,6 +116,13 @@ let RegisterPiece = React.createClass( {
 
 
 let FileUploader = React.createClass({
+    getCookie(name) {
+        let value = '; ' + document.cookie;
+        let parts = value.split('; ' + name + '=');
+        if (parts.length === 2) {
+            return parts.pop().split(';').shift();
+        }
+    },
     render() {
         return (
             <ReactS3FineUploader
@@ -161,7 +168,10 @@ let FileUploader = React.createClass( {
                 deleteFile={{
                     enabled: true,
                     method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete'
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                        'X-CSRFToken': 'asdasd'
+                    }
                 }}
                 validation={{
                     itemLimit: 100000,