fix issues related to multiple files upload

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -1,3 +1,5 @@
+'use strict';
+
 import React from 'react';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
@@ -7,13 +9,16 @@ var FileDragAndDrop = React.createClass({
     propTypes: {
         onDragStart: React.PropTypes.func,
         onDrop: React.PropTypes.func.isRequired,
+        onDrag: React.PropTypes.func,
         onDragEnter: React.PropTypes.func,
         onLeave: React.PropTypes.func,
+        onDragLeave: React.PropTypes.func,
         onDragOver: React.PropTypes.func,
         onDragEnd: React.PropTypes.func,
         filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
-        multiple: React.PropTypes.bool
+        multiple: React.PropTypes.bool,
+        dropzoneInactive: React.PropTypes.bool
     },
 
     handleDragStart(event) {
@@ -81,6 +86,12 @@ var FileDragAndDrop = React.createClass({
     },
 
     handleOnClick() {
+        // when multiple is set to false and the user already uploaded a piece,
+        // do not propagate event
+        if(this.props.dropzoneInactive) {
+            return;
+        }
+
         // Simulate click on hidden file input
         var event = document.createEvent('HTMLEvents');
         event.initEvent('click', false, true);
@@ -88,11 +99,14 @@ var FileDragAndDrop = React.createClass({
     },
 
     render: function () {
+        console.log(this.props.dropzoneInactive);
         let hasFiles = this.props.filesToUpload.length > 0;
+        let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
+        className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
 
         return (
             <div
-                className={hasFiles ? 'file-drag-and-drop has-files' : 'file-drag-and-drop' }
+                className={className}
                 onClick={this.handleOnClick}
                 onDragStart={this.handleDragStart}
                 onDrag={this.handleDrop}
@@ -120,4 +134,4 @@ var FileDragAndDrop = React.createClass({
     }
 });
 
-module.exports = FileDragAndDrop;
+export default FileDragAndDrop;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -10,6 +10,9 @@ import fetch from 'isomorphic-fetch';
 import fineUploader from 'fineUploader';
 import FileDragAndDrop from './file_drag_and_drop';
 
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 var ReactS3FineUploader = React.createClass({
 
     propTypes: {
@@ -259,6 +262,26 @@ var ReactS3FineUploader = React.createClass({
     },
 
     handleUploadFile(files) {
+
+        // If multiple set and user already uploaded its work,
+        // cancel upload
+        if(!this.props.multiple && this.state.filesToUpload.length > 0) {
+            return;
+        }
+
+        // if multiple is set to false and user drops multiple files into the dropzone,
+        // take the first one and notify user that only one file can be submitted
+        if(!this.props.multiple && files.length > 1) {
+            let tempFilesList = [];
+            tempFilesList.push(files[0]);
+
+            // replace filelist with first-element file list
+            files = tempFilesList;
+
+            let notification = new GlobalNotificationModel('Only one file allowed (took first one)', 'danger', 10000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        }
+
         this.state.uploader.addFiles(files);
         let oldFiles = this.state.filesToUpload;
         let oldAndNewFiles = this.state.uploader.getUploads();
@@ -297,7 +320,8 @@ var ReactS3FineUploader = React.createClass({
                 onDrop={this.handleUploadFile}
                 filesToUpload={this.state.filesToUpload}
                 handleDeleteFile={this.handleDeleteFile}
-                multiple={this.props.multiple}/>
+                multiple={this.props.multiple} 
+                dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
         );
     }
 

sass/ascribe_uploader.scss

@@ -10,6 +10,14 @@
     transition: .1s linear background-color;
 }
 
+.inactive-dropzone {
+    cursor: default !important;
+}
+
+.inactive-dropzone:hover {
+    background-color: #FAFAFA !important;
+}
+
 .file-drag-and-drop:hover {
     background-color: rgba(72, 218, 203, 0.2);
 }