first cut: delete functionality

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

@@ -33,18 +33,19 @@ let FileDragAndDropPreview = React.createClass({
         // Decide whether an image or a placeholder picture should be displayed
         if(this.props.file.type.split('/')[0] === 'image') {
             previewElement = (<FileDragAndDropPreviewImage
-                    progress={this.props.file.progress}
-                    url={this.props.file.url}/>);
+                                onClick={this.handleDeleteFile}
+                                progress={this.props.file.progress}
+                                url={this.props.file.url}/>);
         } else {
             previewElement = (<FileDragAndDropPreviewOther
-                    progress={this.props.file.progress}
-                    type={this.props.file.type.split('/')[1]}/>);
+                                onClick={this.handleDeleteFile}
+                                progress={this.props.file.progress}
+                                type={this.props.file.type.split('/')[1]}/>);
         }
 
         return (
             <div
-                className="file-drag-and-drop-position"
-                onClick={this.handleDeleteFile}>
+                className="file-drag-and-drop-position">
                 {previewElement}
             </div>
         );

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -6,7 +6,8 @@ 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() {
@@ -17,6 +18,7 @@ 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"/>

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

@@ -6,12 +6,14 @@ 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 (
             <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">