refactor form validation

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -60,7 +60,6 @@ var FileDragAndDrop = React.createClass({
         }
     },
 
-
     handleDrop(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -107,6 +106,7 @@ var FileDragAndDrop = React.createClass({
     },
 
     render: function () {
+        // has files only is true if there are files that do not have the status deleted or canceled
         let hasFiles = this.props.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').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/react_s3_fine_uploader.js

@@ -27,7 +27,7 @@ var ReactS3FineUploader = React.createClass({
         createBlobRoutine: React.PropTypes.shape({
             url: React.PropTypes.string
         }),
-        handleChange: React.PropTypes.func,
+        submitKey: React.PropTypes.func,
         autoUpload: React.PropTypes.bool,
         debug: React.PropTypes.bool,
         objectProperties: React.PropTypes.shape({
@@ -80,7 +80,9 @@ var ReactS3FineUploader = React.createClass({
         multiple: React.PropTypes.bool,
         retry: React.PropTypes.shape({
             enableAuto: React.PropTypes.bool
-        })
+        }),
+        setUploadStatus: React.PropTypes.func,
+        isReadyForFormSubmission: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -104,7 +106,7 @@ var ReactS3FineUploader = React.createClass({
                 endpoint: AppConstants.serverUrl + 's3/signature/',
                 customHeaders: {
                    'X-CSRFToken': getCookie('csrftoken')
-                },
+                }
             },
             deleteFile: {
                 enabled: true,
@@ -239,8 +241,16 @@ var ReactS3FineUploader = React.createClass({
         });
         this.setState(newState);
         this.createBlob(files[id]);
-        this.props.handleChange();
+        this.props.submitKey(files[id].key);
-        console.log('completed ' + files[id].name);
+        
+        // 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)) {
+            // if so, set uploadstatus to true
+            this.props.setUploadStatus(true);
+        } else {
+            this.props.setUploadStatus(false);
+        }
     },
 
     createBlob(file) {
@@ -291,6 +301,13 @@ var ReactS3FineUploader = React.createClass({
 
         let notification = new GlobalNotificationModel('File upload canceled', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
+        if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
+            // if so, set uploadstatus to true
+            this.props.setUploadStatus(true);
+        } else {
+            this.props.setUploadStatus(false);
+        }
     },
 
     onSessionRequestComplete() {
@@ -307,6 +324,13 @@ var ReactS3FineUploader = React.createClass({
             let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
+
+        if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
+            // if so, set uploadstatus to true
+            this.props.setUploadStatus(true);
+        } else {
+            this.props.setUploadStatus(false);
+        }
     },
 
     onProgress(id, name, uploadedBytes, totalBytes) {

js/components/register_piece.js

@@ -24,8 +24,12 @@ let RegisterPiece = React.createClass( {
     mixins: [Router.Navigation],
 
     getInitialState(){
-        return {digital_work_key: null};
+        return {
+            digitalWorkKey: null,
+            uploadStatus: false
+        };
     },
+
     handleSuccess(){
         let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
@@ -37,30 +41,46 @@ let RegisterPiece = React.createClass( {
         for (let ref in this.refs.form.refs){
             data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value;
         }
-        data.digital_work_key = this.state.digital_work_key;
+        data.digital_work_key = this.state.digitalWorkKey;
         return data;
     },
-    handleChange(){
+
-        this.setState({digital_work_key: this.refs.uploader.refs.fineuploader.state.filesToUpload[0].key});
+    submitKey(key){
+        this.setState({
+            digitalWorkKey: key
+        });
+    },
+
+    setUploadStatus(isReady) {
+        console.log(isReady);
+        this.setState({
+            uploadStatus: isReady
+        });
+    },
+
+    isReadyForFormSubmission(files) {
+        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+        console.log(files);
+        if(files.length > 0 && files[0].status === 'upload successful') {
+            return true;
+        } else {
+            return false;
+        }
     },
 
     render() {
         let buttons = null;
-        if (this.refs.uploader && this.refs.uploader.refs.fineuploader.state.filesToUpload[0].status === 'upload successful'){
+
+        if (this.state.uploadStatus){
             buttons = (
                 <button type="submit" className="btn ascribe-btn ascribe-btn-login">
                     Register your artwork
                 </button>);
         }
+
         return (
             <div className="row ascribe-row">
-                <div className="col-md-5">
+                <div className="col-md-12">
-                    <FileUploader
-                        ref='uploader'
-                        handleChange={this.handleChange}/>
-                    <br />
-                </div>
-                <div className="col-md-7">
                     <h3 style={{'marginTop': 0}}>Lock down title</h3>
                     <Form
                         ref='form'
@@ -73,6 +93,13 @@ let RegisterPiece = React.createClass( {
                                 <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                             </button>
                             }>
+                        <Property
+                            label="Files to upload">
+                            <FileUploader
+                                submitKey={this.submitKey}
+                                setUploadStatus={this.setUploadStatus}
+                                isReadyForFormSubmission={this.isReadyForFormSubmission}/>
+                        </Property>
                         <Property
                             name='artist_name'
                             label="Artist Name">
@@ -117,17 +144,15 @@ let RegisterPiece = React.createClass( {
 
 
 let FileUploader = React.createClass({
-    getCookie(name) {
+    propTypes: {
-        let value = '; ' + document.cookie;
+        setUploadStatus: React.PropTypes.func,
-        let parts = value.split('; ' + name + '=');
+        submitKey: React.PropTypes.func,
-        if (parts.length === 2) {
+        isReadyForFormSubmission: React.PropTypes.func
-            return parts.pop().split(';').shift();
-        }
     },
+
     render() {
         return (
             <ReactS3FineUploader
-                ref='fineuploader'
                 keyRoutine={{
                     url: AppConstants.serverUrl + 's3/key/',
                     fileClass: 'digitalwork'
@@ -135,11 +160,13 @@ let FileUploader = React.createClass({
                 createBlobRoutine={{
                     url: apiUrls.blob_digitalworks
                 }}
-                handleChange={this.props.handleChange}
+                submitKey={this.props.submitKey}
                 validation={{
                     itemLimit: 100000,
                     sizeLimit: '25000000000'
-                }}/>
+                }}
+                setUploadStatus={this.props.setUploadStatus}
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
         );
     }
 });