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 (
);
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 {