Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-504-revive-coa-for-new-frontend

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -99,7 +99,6 @@ 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';

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -1,3 +1,5 @@
+'use strict';
+
 import React from 'react';
 
 import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
@@ -6,7 +8,7 @@ import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
 
 let FileDragAndDropPreview = React.createClass({
 
-    propsTypes: {
+    propTypes: {
         file: React.PropTypes.shape({
             url: React.PropTypes.string,
             type: React.PropTypes.string
@@ -25,24 +27,28 @@ let FileDragAndDropPreview = React.createClass({
         }
     },
 
+    // implement a handle cancel action here that triggers fineuploaders cancel method
+    // to delete files that are currently uploading
+
     render() {
         let previewElement;
 
-        // Decide wether an image or a placeholder picture should be displayed
+        // Decide whether an image or a placeholder picture should be displayed
         if(this.props.file.type.split('/')[0] === 'image') {
-            previewElement = (<FileDragAndDropPreviewImage 
+            previewElement = (<FileDragAndDropPreviewImage
-                    progress={this.props.file.progress} 
+                                onClick={this.handleDeleteFile}
-                    url={this.props.file.url}/>);
+                                progress={this.props.file.progress}
+                                url={this.props.file.url}/>);
         } else {
-            previewElement = (<FileDragAndDropPreviewOther 
+            previewElement = (<FileDragAndDropPreviewOther
-                    progress={this.props.file.progress} 
+                                onClick={this.handleDeleteFile}
-                    type={this.props.file.type.split('/')[1]}/>);
+                                progress={this.props.file.progress}
+                                type={this.props.file.type.split('/')[1]}/>);
         }
 
         return (
-            <div 
+            <div
-                className="file-drag-and-drop-position" 
+                className="file-drag-and-drop-position">
-                onClick={this.handleDeleteFile}>
                 {previewElement}
             </div>
         );

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -1,10 +1,13 @@
+'use strict';
+
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
 let FileDragAndDropPreviewImage = React.createClass({
     propTypes: {
         progress: React.PropTypes.number,
-        url: React.PropTypes.string
+        url: React.PropTypes.string,
+        onClick: React.PropTypes.func
     },
 
     render() {
@@ -15,9 +18,11 @@ 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}
             </div>
         );
     }

js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js

@@ -1,3 +1,5 @@
+'use strict';
+
 import React from 'react';
 
 import FileDragAndDropPreview from './file_drag_and_drop_preview';
@@ -14,7 +16,7 @@ let FileDragAndDropPreviewIterator = React.createClass({
                 <div>
                     {this.props.files.map((file, i) => {
                         return (
-                            <FileDragAndDropPreview 
+                            <FileDragAndDropPreview
                                 key={i}
                                 file={file}
                                 handleDeleteFile={this.props.handleDeleteFile}/>

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -1,19 +1,24 @@
+'use strict';
+
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
 let FileDragAndDropPreviewOther = React.createClass({
     propTypes: {
         type: React.PropTypes.string,
-        progress: React.PropTypes.number
+        progress: React.PropTypes.number,
+        onClick: React.PropTypes.func
     },
 
     render() {
-        return(
+        return (
-            <div 
+            <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>{'.' + this.props.type}</span>
                     </div>
                 </div>

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -221,6 +221,7 @@ var ReactS3FineUploader = React.createClass({
 
     onCancel() {
         console.log('cancel');
+        // handle file removal here, for this.state.filesToUpload (same as in onDeleteComplete)
     },
 
     onSessionRequestComplete() {
@@ -229,18 +230,23 @@ var ReactS3FineUploader = React.createClass({
 
     onDeleteComplete(id, xhr, isError) {
         if(isError) {
+            let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        } else {
             // 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(id, 1);
 
             // set state
-            this.setState({
+            let newState = React.addons.update(this.state, {
-                filesToUpload: React.addons.update(this.state.filesToUpload, {$set: filesToUpload})
+                filesToUpload: { $set: filesToUpload }
             });
-        } else {
+            this.setState(newState);
-            console.log(id);
+
-            // TODO: add global notification
+            let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
         }
     },
 

js/components/register_piece.js

@@ -179,7 +179,7 @@ let FileUploader = React.createClass( {
                     }
                     return name;
                 }}
-                multiple={false}/>
+                multiple={true}/>
         );
     }
 });

sass/ascribe_react_s3_fineuploader.scss

@@ -1,64 +0,0 @@
-.file-drag-and-drop {
-    display: table-cell;
-    outline: 1px dashed #616161;
-    cursor: pointer;
-    vertical-align: middle;
-    text-align: center;
-    height:208px;
-    width: 672px;
-    background-color: #FAFAFA;
-    transition: .1s linear background-color;
-}
-
-.file-drag-and-drop:hover {
-    background-color: rgba(72, 218, 203, 0.2);
-}
-
-.file-drag-and-drop > span {
-    font-size: 1.5em;
-}
-
-.has-files {
-    text-align: left;
-    padding: 3em 0 0 0;
-}
-
-.file-drag-and-drop-position {
-    display: inline-block;
-    margin: 0 0 3em 3em;
-    float:left;
-}
-
-.file-drag-and-drop-preview-table-wrapper {
-    display: table;
-    height:94px;
-    width:104px;
-}
-
-.file-drag-and-drop-preview {
-    overflow:hidden;
-    cursor: default;
-    background-color: #EEEEEE;
-    border: 1px solid #616161;
-}
-
-.file-drag-and-drop-preview-image {
-    display: table;
-    height:104px;
-    width:104px;
-    overflow:hidden;
-    border: 1px solid #616161;
-}
-
-.file-drag-and-drop-preview-other {
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-
-}
-
-.file-drag-and-drop-preview-other span {
-    font-size: 1.1em;
-    display: block;
-    margin-top: -10px;
-}

sass/ascribe_uploader.scss

@@ -56,6 +56,33 @@
     width:104px;
     overflow:hidden;
     border: 1px solid #616161;
+    text-align: center;
+}
+
+.file-drag-and-drop-preview-image .delete-file {
+    font-size: 3em;
+    margin-top: .5em;
+    color: white;
+    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+    cursor: pointer;
+
+    &:hover {
+        color: #d9534f;
+    }
+}
+
+.file-drag-and-drop-preview-other .delete-file {
+    position: relative;
+    top: .45em;
+    margin-top: 0;
+    font-size: 3em;
+    color: white;
+    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+    cursor: pointer;
+
+    &:hover {
+        color: #d9534f;
+    }
 }
 
 .file-drag-and-drop-preview-other {
@@ -65,8 +92,7 @@
 
 }
 
-.file-drag-and-drop-preview-other span {
+.file-drag-and-drop-preview-other span:not(:first-child) {
-    font-size: 1.1em;
     display: block;
-    margin-top: -10px;
+    margin-top: 1.5em;
 }

sass/main.scss

@@ -22,7 +22,6 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_piece_register';
 @import 'offset_right';
 @import 'ascribe_settings';
-@import 'ascribe_react_s3_fineuploader';
 
 body {
     background-color: #FDFDFD;