From a87f2eb2727a0ab6e35be7d4b8df3e0f01eb030e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 29 Jun 2015 11:44:16 +0200 Subject: [PATCH] refactor form validation --- .../ascribe_uploader/file_drag_and_drop.js | 2 +- .../react_s3_fine_uploader.js | 34 +++++++-- js/components/register_piece.js | 69 +++++++++++++------ 3 files changed, 78 insertions(+), 27 deletions(-) diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js index 6e8843be..4ef77872 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop.js +++ b/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'; diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 7afd4981..86dd8d98 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/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(); - console.log('completed ' + files[id].name); + 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)) { + // 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) { diff --git a/js/components/register_piece.js b/js/components/register_piece.js index c234ff92..51e89565 100644 --- a/js/components/register_piece.js +++ b/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 = ( ); } + return (
-
- -
-
-
+

Lock down title

}> + + + @@ -117,17 +144,15 @@ let RegisterPiece = React.createClass( { let FileUploader = React.createClass({ - getCookie(name) { - let value = '; ' + document.cookie; - let parts = value.split('; ' + name + '='); - if (parts.length === 2) { - return parts.pop().split(';').shift(); - } + propTypes: { + setUploadStatus: React.PropTypes.func, + submitKey: React.PropTypes.func, + isReadyForFormSubmission: React.PropTypes.func }, + render() { return ( + }} + setUploadStatus={this.props.setUploadStatus} + isReadyForFormSubmission={this.props.isReadyForFormSubmission}/> ); } });