ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

Changing behavior for ReactS3Fineuploader not having access to createBlobRoutine

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-11 18:17:32 +01:00
parent 0438f461c2
commit 62f19467b7
3 changed files with 102 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/ascribe_forms/input_fineuploader.js
View File

@ -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}

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

@ -298,10 +298,7 @@ let ReactS3FineUploader = React.createClass({
resolve(res.key);
})
.catch((err) => {
console.logGlobal(err, false, {
files: this.state.filesToUpload,
chunks: this.state.chunks
});
this.onErrorPromiseProxy(err);
reject(err);
});
});
@ -310,56 +307,57 @@ 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) => {
window.fetch(createBlobRoutine.url, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': getCookie(AppConstants.csrftoken)
},
credentials: 'include',
body: JSON.stringify({
'filename': file.name,
'key': file.key,
'piece_id': createBlobRoutine.pieceId
})
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: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': getCookie(AppConstants.csrftoken)
},
credentials: 'include',
body: JSON.stringify({
'filename': file.name,
'key': file.key,
'piece_id': createBlobRoutine.pieceId
})
.then((res) => {
return res.json();
})
.then((res) => {
if(res.otherdata) {
file.s3Url = res.otherdata.url_safe;
file.s3UrlSafe = res.otherdata.url_safe;
} else if(res.digitalwork) {
file.s3Url = res.digitalwork.url_safe;
file.s3UrlSafe = res.digitalwork.url_safe;
} else if(res.contractblob) {
file.s3Url = res.contractblob.url_safe;
file.s3UrlSafe = res.contractblob.url_safe;
} else if(res.thumbnail) {
file.s3Url = res.thumbnail.url_safe;
file.s3UrlSafe = res.thumbnail.url_safe;
} else {
throw new Error(getLangText('Could not find a url to download.'));
}
resolve(res);
})
.catch((err) => {
console.logGlobal(err, false, {
files: this.state.filesToUpload,
chunks: this.state.chunks
});
reject(err);
});
})
.then((res) => {
return res.json();
})
.then((res) => {
if(res.otherdata) {
file.s3Url = res.otherdata.url_safe;
file.s3UrlSafe = res.otherdata.url_safe;
} else if(res.digitalwork) {
file.s3Url = res.digitalwork.url_safe;
file.s3UrlSafe = res.digitalwork.url_safe;
} else if(res.contractblob) {
file.s3Url = res.contractblob.url_safe;
file.s3UrlSafe = res.contractblob.url_safe;
} else if(res.thumbnail) {
file.s3Url = res.thumbnail.url_safe;
file.s3UrlSafe = res.thumbnail.url_safe;
} else {
throw new Error(getLangText('Could not find a url to download.'));
}
resolve(res);
})
.catch((err) => {
this.onErrorPromiseProxy(err);
reject(err);
});
}
});
},
/* FineUploader specific callback function handlers */
@ -415,55 +413,51 @@ 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(() => {
// since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile
// are optional, we'll only trigger them when they're actually defined
if(this.props.submitFile) {
this.props.submitFile(files[id]);
// Only after the blob has been created server-side, we can make the form submittable.
this.createBlob(files[id])
.then(() => {
// since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile
// are optional, we'll only trigger them when they're actually defined
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');
}
// for explanation, check comment of if statement above
if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
// also, lets check if after the completion of this upload,
// the form is ready for submission or not
if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setIsUploadReady(true);
} else {
console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader');
this.props.setIsUploadReady(false);
}
// for explanation, check comment of if statement above
if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
// also, lets check if after the completion of this upload,
// the form is ready for submission or not
if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setIsUploadReady(true);
} else {
this.props.setIsUploadReady(false);
}
} else {
console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
}
})
.catch((err) => {
console.logGlobal(err, false, {
files: this.state.filesToUpload,
chunks: this.state.chunks
});
let notification = new GlobalNotificationModel(err.message, 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
});
}
} else {
console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
}
})
.catch(this.onErrorPromiseProxy);
}
},
/**
* 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) {

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

@ -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>