ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 05:31:58 +02:00
Code Issues Releases Wiki Activity

Add proper validation for multiple uploaders in submission form

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-12 10:46:08 +01:00
parent 62f19467b7
commit e6d839f6a0
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -421,7 +421,7 @@ let ReactS3FineUploader = React.createClass({
if(this.props.submitFile) { if(this.props.submitFile) {
this.props.submitFile(files[id]); this.props.submitFile(files[id]);
} else { } else {
console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader'); console.warn('You didn\'t define submitFile as a prop in react-s3-fine-uploader');
} }
// for explanation, check comment of if statement above // for explanation, check comment of if statement above
if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) { if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
@ -443,10 +443,10 @@ let ReactS3FineUploader = React.createClass({
/** /**
* We want to channel all errors in this component through one single method. * We want to channel all errors in this component through one single method.
* As fineuploader's onError method cannot handle the callback parameters of * 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. * a promise we define this proxy method to crunch them into the correct form.
* *
* @param {error} err plain Javascript error * @param {error} err a plain Javascript error
*/ */
onErrorPromiseProxy(err) { onErrorPromiseProxy(err) {
this.onError(null, null, err.message); this.onError(null, null, err.message);

40
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -36,7 +36,12 @@ const PRRegisterPieceForm = React.createClass({
getInitialState(){ getInitialState(){
return { return {
isUploadReady: true, digitalWorkKeyReady: false,
thumbnailKeyReady: false,
// we set this to true, as it is not required
supportingMaterialsReady: true,
proofOfPaymentReady: false,
piece: null piece: null
}; };
}, },
@ -124,15 +129,25 @@ const PRRegisterPieceForm = React.createClass({
} }
}, },
setIsUploadReady(isUploadReady) { /**
this.setState({ * This method is overloaded so that we can track the ready-state
isUploadReady * of each uploader in the component
}); * @param {string} uploaderKey Name of the uploader's key to track
*/
setIsUploadReady(uploaderKey) {
return (isUploadReady) => {
this.setState({
[uploaderKey]: isUploadReady
});
};
}, },
render() { render() {
const { location } = this.props; const { location } = this.props;
const { isUploadReady } = this.state; const { digitalWorkKeyReady,
thumbnailKeyReady,
supportingMaterialsReady,
proofOfPaymentReady } = this.state;
return ( return (
<div className="register-piece--form"> <div className="register-piece--form">
@ -203,7 +218,7 @@ const PRRegisterPieceForm = React.createClass({
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady} setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
createBlobRoutine={{ createBlobRoutine={{
url: ApiUrls.blob_digitalworks url: ApiUrls.blob_digitalworks
}} }}
@ -233,7 +248,7 @@ const PRRegisterPieceForm = React.createClass({
url: ApiUrls.blob_thumbnails url: ApiUrls.blob_thumbnails
}} }}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady} setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail' fileClass: 'thumbnail'
@ -247,7 +262,8 @@ const PRRegisterPieceForm = React.createClass({
fileClassToUpload={{ fileClassToUpload={{
singular: getLangText('Upload cover photo'), singular: getLangText('Upload cover photo'),
plural: getLangText('Upload cover photos') plural: getLangText('Upload cover photos')
}}/> }}
required/>
</Property> </Property>
<Property <Property
name="supportingMaterials" name="supportingMaterials"
@ -256,7 +272,7 @@ const PRRegisterPieceForm = React.createClass({
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady} setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
@ -279,7 +295,7 @@ const PRRegisterPieceForm = React.createClass({
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady} setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
@ -314,7 +330,7 @@ const PRRegisterPieceForm = React.createClass({
<button <button
type="submit" type="submit"
className="btn btn-default btn-wide" className="btn btn-default btn-wide"
disabled={!isUploadReady} disabled={!(digitalWorkKeyReady && thumbnailKeyReady && proofOfPaymentReady && supportingMaterialsReady)}
onClick={this.submit}> onClick={this.submit}>
{getLangText('Submit to Portfolio Review')} {getLangText('Submit to Portfolio Review')}
</button> </button>