add file drag and drop toolbar

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -17,10 +17,7 @@ let FileDragAndDropPreview = React.createClass({
         handleCancelFile: React.PropTypes.func
     },
 
-    handleDeleteFile(event) {
+    handleDeleteFile() {
-        event.preventDefault();
-        event.stopPropagation();
-
         // handleDeleteFile is optional, so if its not submitted,
         // don't run it
         // On the other hand, if the files progress is not yet at a 100%,

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -19,6 +19,9 @@ let FileDragAndDropPreviewImage = React.createClass({
     },
 
     onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        
         this.setState({
             loading: true
         });

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -3,6 +3,8 @@
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
+import AppConstants from '../../constants/application_constants';
+
 let FileDragAndDropPreviewOther = React.createClass({
     propTypes: {
         type: React.PropTypes.string,
@@ -10,20 +12,32 @@ let FileDragAndDropPreviewOther = React.createClass({
         onClick: React.PropTypes.func
     },
 
+    getInitialState() {
+        return {
+            loading: false
+        };
+    },
+
+    onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        this.setState({
+            loading: true
+        });
+
+        this.props.onClick(e);
+    },
+
     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} />;
         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
+                        {actionSymbol}
-                            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/file_drag_and_drop_toolbar.js

@@ -0,0 +1,13 @@
+'use strict';
+
+import React from 'react';
+
+let FileDragAndDropToolbar = React.createClass({
+    render() {
+        return (
+            <div></div>
+        );
+    }
+});
+
+export default FileDragAndDropToolbar;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -12,6 +12,7 @@ import { getCookie } from '../../utils/fetch_api_utils';
 
 import fineUploader from 'fineUploader';
 import FileDragAndDrop from './file_drag_and_drop';
+import FileDragAndDropToolbar from './file_drag_and_drop_toolbar';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
@@ -141,7 +142,7 @@ var ReactS3FineUploader = React.createClass({
                 }
                 return name;
             },
-            multiple: true
+            multiple: false
         };
     },
 
@@ -299,7 +300,7 @@ var ReactS3FineUploader = React.createClass({
     onCancel(id) {
         this.removeFileWithIdFromFilesToUpload(id);
 
-        let notification = new GlobalNotificationModel('File upload canceled', 'success', 10000);
+        let notification = new GlobalNotificationModel('File upload canceled', 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
@@ -310,10 +311,6 @@ var ReactS3FineUploader = React.createClass({
         }
     },
 
-    onSessionRequestComplete() {
-        console.log('sessionrequestcomplete');
-    },
-
     onDeleteComplete(id, xhr, isError) {
         if(isError) {
             let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
@@ -321,7 +318,7 @@ var ReactS3FineUploader = React.createClass({
         } else {
             this.removeFileWithIdFromFilesToUpload(id);
 
-            let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
+            let notification = new GlobalNotificationModel('File deleted', 'success', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
 
@@ -397,6 +394,7 @@ var ReactS3FineUploader = React.createClass({
                     oldAndNewFiles[i].progress = oldFiles[j].progress;
                     oldAndNewFiles[i].type = oldFiles[j].type;
                     oldAndNewFiles[i].url = oldFiles[j].url;
+                    oldAndNewFiles[i].key = oldFiles[j].key;
                 }
             }
         }
@@ -424,14 +422,17 @@ var ReactS3FineUploader = React.createClass({
 
     render() {
         return (
-            <FileDragAndDrop
+            <div>
-                className="file-drag-and-drop"
+                <FileDragAndDrop
-                onDrop={this.handleUploadFile}
+                    className="file-drag-and-drop"
-                filesToUpload={this.state.filesToUpload}
+                    onDrop={this.handleUploadFile}
-                handleDeleteFile={this.handleDeleteFile}
+                    filesToUpload={this.state.filesToUpload}
-                handleCancelFile={this.handleCancelFile}
+                    handleDeleteFile={this.handleDeleteFile}
-                multiple={this.props.multiple}
+                    handleCancelFile={this.handleCancelFile}
-                dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
+                    multiple={this.props.multiple}
+                    dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
+                <FileDragAndDropToolbar />
+            </div>
         );
     }
 

js/components/edition.js

@@ -434,12 +434,40 @@ let EditionFurtherDetails = React.createClass({
         edition: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
+
+    getInitialState() {
+        return {
+            loading: false
+        };
+    },
+
     showNotification(){
         this.props.handleSuccess();
         let notification = new GlobalNotificationModel('Details updated', 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
+    submitKey(key){
+        this.setState({
+            otherDataKey: key
+        });
+    },
+
+    setUploadStatus(isReady) {
+        this.setState({
+            uploadStatus: isReady
+        });
+    },
+
+    isReadyForFormSubmission(files) {
+        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+        if(files.length > 0 && files[0].status === 'upload successful') {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
     render() {
         let editable = this.props.edition.acl.indexOf('edit') > -1;
         return (
@@ -464,22 +492,26 @@ let EditionFurtherDetails = React.createClass({
                         editable={editable}
                         edition={this.props.edition} />
                     <FileUploader
-                        edition={this.props.edition}
+                        submitKey={this.submitKey}
-                        ref='uploader'/>
+                        setUploadStatus={this.setUploadStatus}
+                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                        edition={this.props.edition}/>
                 </Col>
             </Row>
         );
     }
 });
 
-let FileUploader = React.createClass( {
+let FileUploader = React.createClass({
-    handleChange(){
+    propTypes: {
-        this.setState({other_data_key: this.refs.fineuploader.state.filesToUpload[0].key});
+        setUploadStatus: React.PropTypes.func,
+        submitKey: React.PropTypes.func,
+        isReadyForFormSubmission: React.PropTypes.func
     },
+
     render() {
         return (
             <ReactS3FineUploader
-                ref='fineuploader'
                 keyRoutine={{
                     url: AppConstants.serverUrl + 's3/key/',
                     fileClass: 'otherdata',
@@ -488,11 +520,13 @@ let FileUploader = React.createClass( {
                 createBlobRoutine={{
                     url: apiUrls.blob_digitalworks
                 }}
-                handleChange={this.handleChange}
                 validation={{
                     itemLimit: 100000,
                     sizeLimit: '10000000'
-                }}/>
+                }}
+                submitKey={this.props.submitKey}
+                setUploadStatus={this.props.setUploadStatus}
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
         );
     }
 });

js/components/register_piece.js

@@ -52,7 +52,6 @@ let RegisterPiece = React.createClass( {
     },
 
     setUploadStatus(isReady) {
-        console.log(isReady);
         this.setState({
             uploadStatus: isReady
         });
@@ -60,7 +59,6 @@ let RegisterPiece = React.createClass( {
 
     isReadyForFormSubmission(files) {
         files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
-        console.log(files);
         if(files.length > 0 && files[0].status === 'upload successful') {
             return true;
         } else {