Finalize cancel and delete functionality for UploadButton

js/components/ascribe_forms/form_register_piece.js

@@ -98,7 +98,11 @@ let RegisterPieceForm = React.createClass({
         const { digitalWorkFile } = this.state;
         const { fineuploader } = this.refs.digitalWorkFineUploader.refs;
 
-        fineuploader.setThumbnailForFileId(digitalWorkFile.id, thumbnailFile.url);
+        fineuploader.setThumbnailForFileId(
+            digitalWorkFile.id,
+            // if thumbnail was delete, we delete it from the display as well
+            thumbnailFile.status !== 'deleted' ? thumbnailFile.url : null
+        );
     },
 
     isThumbnailDialogExpanded() {
@@ -187,7 +191,7 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
-                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -32,6 +32,20 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             handleDeleteFile: func
         },
 
+        getInitialState() {
+            return {
+                disabled: this.getUploadingFiles().length !== 0
+            };
+        },
+
+        componentWillReceiveProps(nextProps) {
+            if(this.props.filesToUpload !== nextProps.filesToUpload) {
+                this.setState({
+                    disabled: this.getUploadingFiles().length !== 0
+                });
+            }
+        },
+
         handleDrop(event) {
             event.preventDefault();
             event.stopPropagation();
@@ -55,33 +69,38 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         handleOnClick() {
-            let evt;
+            if(!this.state.disabled) {
-            const uploadingFile = this.getUploadingFiles();
+                let evt;
-            const uploadedFile = this.getUploadedFile();
+                const uploadingFiles = this.getUploadingFiles();
+                const uploadedFile = this.getUploadedFile();
 
-
-            if(uploadingFile.length) {
                 this.clearSelection();
-                this.props.handleCancelFile(uploadingFile[0].id);
+                if(uploadingFiles.length) {
-            } else if(uploadedFile) {
+                    this.props.handleCancelFile(uploadingFiles[0].id);
-                this.props.handleDeleteFile(uploadedFile.id);
+                } else if(uploadedFile && !uploadedFile.s3UrlSafe) {
+                    this.props.handleCancelFile(uploadedFile.id);
+                } else if(uploadedFile && uploadedFile.s3UrlSafe) {
+                    this.props.handleDeleteFile(uploadedFile.id);
+                }
+
+                try {
+                    evt = new MouseEvent('click', {
+                        view: window,
+                        bubbles: true,
+                        cancelable: true
+                    });
+                } catch(e) {
+                    // For browsers that do not support the new MouseEvent syntax
+                    evt = document.createEvent('MouseEvents');
+                    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+                }
+                evt.stopPropagation();
+                this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
             }
-            try {
-                evt = new MouseEvent('click', {
-                    view: window,
-                    bubbles: true,
-                    cancelable: true
-                });
-            } catch(e) {
-                // For browsers that do not support the new MouseEvent syntax
-                evt = document.createEvent('MouseEvents');
-                evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
-            }
-            evt.stopPropagation();
-            this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
         },
 
         onClickRemove() {
+            this.clearSelection();
             const uploadedFile = this.getUploadedFile();
             this.props.handleDeleteFile(uploadedFile.id);
         },
@@ -118,8 +137,11 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         render() {
-            let { multiple,
+            const {
-                 allowedExtensions } = this.props;
+                multiple,
+                allowedExtensions } = this.props;
+            const { disabled } = this.state;
+
 
             /*
              * We do not want a button that submits here.
@@ -129,10 +151,15 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              */
             return (
                 <div className="upload-button-wrapper">
-                    <a
+                    {/*
+                        The button needs to be of `type="button"` as it would
+                        otherwise submit the form its in.
+                    */}
+                    <button
+                        type="button"
                         onClick={this.handleOnClick}
                         className={className}
-                        disabled={this.getUploadingFiles().length !== 0}>
+                        disabled={disabled}>
                         {this.getButtonLabel()}
                         <input
                             multiple={multiple}
@@ -145,7 +172,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
                             }}
                             onChange={this.handleDrop}
                             accept={allowedExtensions}/>
-                   </a>
+                   </button>
                    {this.getUploadedFileLabel()}
                 </div>
             );

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -286,7 +286,7 @@ const ReactS3FineUploader = React.createClass({
 
     // Cancel uploads and clear previously selected files on the input element
     cancelUploads(id) {
-        !!id ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
+        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
 
         // Reset the file input element to clear the previously selected files so that
         // the user can reselect them again.
@@ -394,11 +394,13 @@ const ReactS3FineUploader = React.createClass({
 
         if(fileId < filesToUpload.length) {
             const changeSet = { $set: url };
-            const newFilesToUpload = React.addons.update(filesToUpload, { [fileId]: { thumbnailUrl: changeSet } });
+            const newFilesToUpload = React.addons.update(filesToUpload, {
+                [fileId]: { thumbnailUrl: changeSet }
+            });
 
             this.setState({ filesToUpload: newFilesToUpload });
         } else {
-            throw new Error("You're accessing an index out of range of filesToUpload");
+            throw new Error('Accessing an index out of range of filesToUpload');
         }
     },
 

sass/ascribe_custom_style.scss

@@ -257,6 +257,24 @@ hr {
     font-weight: $ascribe--font-weight-light;
 }
 
+.btn-default {
+    background-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-default-color;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:hover,
+    &:active:focus,
+    &:active.focus,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        background-color: lighten($ascribe--button-default-color, 20%);
+        border-color: lighten($ascribe--button-default-color, 20%);
+    }
+}
+
 // disabled buttons
 .btn-default.disabled,
 .btn-default.disabled:hover,
@@ -280,9 +298,10 @@ fieldset[disabled] .btn-default.active {
     border-color: darken($ascribe--button-default-color, 20%);
 }
 
-.btn-default {
+.btn-secondary {
-    background-color: $ascribe--button-default-color;
+    background-color: $ascribe--button-secondary-bg-color;
-    border-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-secondary-fg-color;
+    color: $ascribe--button-secondary-fg-color;
 
     &:hover,
     &:active,
@@ -293,8 +312,9 @@ fieldset[disabled] .btn-default.active {
     &.active:hover,
     &.active:focus,
     &.active.focus {
-        background-color: lighten($ascribe--button-default-color, 20%);
+        background-color: $ascribe--button-secondary-fg-color;
-        border-color: lighten($ascribe--button-default-color, 20%);
+        border-color: $ascribe--button-secondary-bg-color;
+        color: $ascribe--button-secondary-bg-color;
     }
 }
 
@@ -322,26 +342,6 @@ fieldset[disabled] .btn-secondary.active {
     color: darken($ascribe--button-secondary-fg-color, 20%);
 }
 
-.btn-secondary {
-    background-color: $ascribe--button-secondary-bg-color;
-    border-color: $ascribe--button-secondary-fg-color;
-    color: $ascribe--button-secondary-fg-color;
-
-    &:hover,
-    &:active,
-    &:focus,
-    &:active:hover,
-    &:active:focus,
-    &:active.focus,
-    &.active:hover,
-    &.active:focus,
-    &.active.focus {
-        background-color: $ascribe--button-secondary-fg-color;
-        border-color: $ascribe--button-secondary-bg-color;
-        color: $ascribe--button-secondary-bg-color;
-    }
-}
-
 .btn-tertiary {
     background-color: transparent;
     border-color: transparent;