From 52db729a4d748f6a775fa3d57e99b532474cd561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 29 Jun 2015 17:59:35 +0200
Subject: [PATCH] readd delete functionality

---
 .../file_drag_and_drop_preview.js             |  4 ++++
 .../react_s3_fine_uploader.js                 |  2 +-
 sass/ascribe_uploader.scss                    | 20 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index f9054283..5fbae1ca 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -32,6 +32,7 @@ let FileDragAndDropPreview = React.createClass({
         // don't run it
         // On the other hand, if the files progress is not yet at a 100%,
         // just run fineuploader.cancel
+        console.log(this.props.file);
         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) {
@@ -63,6 +64,9 @@ let FileDragAndDropPreview = React.createClass({
         return (
             <div
                 className="file-drag-and-drop-position">
+                <div className="delete-file">
+                    <span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
+                </div>
                 {previewElement}
             </div>
         );
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index e8d86a1b..99894486 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -242,7 +242,7 @@ var ReactS3FineUploader = React.createClass({
         this.setState(newState);
         this.createBlob(files[id]);
         this.props.submitKey(files[id].key);
-        
+
         // also, lets check if after the completion of this upload,
         // the form is ready for submission or not
         if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 29dbe39a..892c6235 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -43,9 +43,29 @@
 }
 
 .file-drag-and-drop-position {
+    position: relative;
     display: inline-block;
     margin: 0 0 4% 4%;
     float:left;
+
+    .delete-file {
+        display: block;
+        background-color: black;
+        
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        right: -7px;
+        top: -7px;
+        border-radius: 1em;
+        text-align: center;
+
+        cursor: pointer;
+
+        span {
+            color: white;
+        }
+    }
 }
 
 .file-drag-and-drop-preview-table-wrapper {