Changing behavior for ReactS3Fineuploader not having access to createBlobRoutine

js/components/ascribe_forms/input_fineuploader.js

@@ -21,7 +21,6 @@ const InputFineUploader = React.createClass({
 
         areAssetsDownloadable: bool,
 
-        onClick: func,
         keyRoutine: shape({
             url: string,
             fileClass: string
@@ -69,7 +68,6 @@ const InputFineUploader = React.createClass({
     },
 
     submitFile(file) {
-        console.log(file);
         this.setState({
             file,
             value: file.key
@@ -97,7 +95,6 @@ const InputFineUploader = React.createClass({
 
     render() {
         const { fileInputElement,
-                onClick,
                 keyRoutine,
                 createBlobRoutine,
                 validation,
@@ -120,7 +117,6 @@ const InputFineUploader = React.createClass({
             <ReactS3FineUploader
                 ref="fineuploader"
                 fileInputElement={fileInputElement}
-                onClick={onClick}
                 keyRoutine={keyRoutine}
                 createBlobRoutine={createBlobRoutine}
                 validation={validation}

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -298,10 +298,7 @@ let ReactS3FineUploader = React.createClass({
                 resolve(res.key);
             })
             .catch((err) => {
-                console.logGlobal(err, false, {
+                this.onErrorPromiseProxy(err);
-                    files: this.state.filesToUpload,
-                    chunks: this.state.chunks
-                });
                 reject(err);
             });
         });
@@ -310,12 +307,17 @@ let ReactS3FineUploader = React.createClass({
     createBlob(file) {
         const { createBlobRoutine } = this.props;
 
-        // returning here without doing anything enables us to
-        // lazy create the blob at any time after the upload
-        if(!createBlobRoutine) {
-            return null;
-        } else {
         return Q.Promise((resolve, reject) => {
+
+            // if createBlobRoutine is not defined,
+            // we're progressing right away without posting to S3
+            // so that this can be done manually by the form
+            if(!createBlobRoutine) {
+                // still we warn the user of this component
+                console.warn('createBlobRoutine was not defined for ReactS3FineUploader. Continuing without creating the blob on the server.');
+                resolve();
+            }
+
             window.fetch(createBlobRoutine.url, {
                 method: 'post',
                 headers: {
@@ -352,14 +354,10 @@ let ReactS3FineUploader = React.createClass({
                 resolve(res);
             })
             .catch((err) => {
-                    console.logGlobal(err, false, {
+                this.onErrorPromiseProxy(err);
-                        files: this.state.filesToUpload,
-                        chunks: this.state.chunks
-                    });
                 reject(err);
             });
         });
-        }
     },
 
     /* FineUploader specific callback function handlers */
@@ -415,14 +413,6 @@ let ReactS3FineUploader = React.createClass({
             let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: files });
             this.setState({ filesToUpload });
 
-            const createBlobResult = this.createBlob(files[id]);
-            if(!createBlobResult) {
-                if(this.props.submitFile) {
-                    this.props.submitFile(files[id]);
-                } else {
-                    console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader');
-                }
-            } else {
             // Only after the blob has been created server-side, we can make the form submittable.
             this.createBlob(files[id])
                 .then(() => {
@@ -447,23 +437,27 @@ let ReactS3FineUploader = React.createClass({
                         console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
                     }
                 })
-                    .catch((err) => {
+                .catch(this.onErrorPromiseProxy);
-                        console.logGlobal(err, false, {
-                            files: this.state.filesToUpload,
-                            chunks: this.state.chunks
-                        });
-                        let notification = new GlobalNotificationModel(err.message, 'danger', 5000);
-                        GlobalNotificationActions.appendGlobalNotification(notification);
-                    });
-            }
         }
     },
 
+    /**
+     * We want to channel all errors in this component through one single method.
+     * As fineuploader's onError method cannot handle the callback parameters of
+     * a promise we define this proxy method to crunch them into the correct form.
+     *
+     * @param  {error} err plain Javascript error
+     */
+    onErrorPromiseProxy(err) {
+        this.onError(null, null, err.message);
+    },
+
     onError(id, name, errorReason) {
         console.logGlobal(errorReason, false, {
             files: this.state.filesToUpload,
             chunks: this.state.chunks
         });
+        this.props.setIsUploadReady(true);
         this.state.uploader.cancelAll();
 
         let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000);
@@ -628,6 +622,10 @@ let ReactS3FineUploader = React.createClass({
     },
 
     handleUploadFile(files) {
+        // While files are being uploaded, the form cannot be ready
+        // for submission
+        this.props.setIsUploadReady(false);
+
         // If multiple set and user already uploaded its work,
         // cancel upload
         if(!this.props.multiple && this.state.filesToUpload.filter(displayValidFilesFilter).length > 0) {

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -36,7 +36,7 @@ const PRRegisterPieceForm = React.createClass({
 
     getInitialState(){
         return {
-            isUploadReady: false,
+            isUploadReady: true,
             piece: null
         };
     },
@@ -124,8 +124,15 @@ const PRRegisterPieceForm = React.createClass({
         }
     },
 
+    setIsUploadReady(isUploadReady) {
+        this.setState({
+            isUploadReady
+        });
+    },
+
     render() {
         const { location } = this.props;
+        const { isUploadReady } = this.state;
 
         return (
             <div className="register-piece--form">
@@ -196,7 +203,7 @@ const PRRegisterPieceForm = React.createClass({
                         <InputFineuploader
                             fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+                            setIsUploadReady={this.setIsUploadReady}
                             createBlobRoutine={{
                                 url: ApiUrls.blob_digitalworks
                             }}
@@ -226,7 +233,7 @@ const PRRegisterPieceForm = React.createClass({
                                 url: ApiUrls.blob_thumbnails
                             }}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+                            setIsUploadReady={this.setIsUploadReady}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
                                 fileClass: 'thumbnail'
@@ -249,7 +256,7 @@ const PRRegisterPieceForm = React.createClass({
                         <InputFineuploader
                             fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+                            setIsUploadReady={this.setIsUploadReady}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
@@ -272,7 +279,7 @@ const PRRegisterPieceForm = React.createClass({
                         <InputFineuploader
                             fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+                            setIsUploadReady={this.setIsUploadReady}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
@@ -307,6 +314,7 @@ const PRRegisterPieceForm = React.createClass({
                 <button
                     type="submit"
                     className="btn btn-default btn-wide"
+                    disabled={!isUploadReady}
                     onClick={this.submit}>
                     {getLangText('Submit to Portfolio Review')}
                 </button>