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, areAssetsDownloadable: bool,
onClick: func,
keyRoutine: shape({ keyRoutine: shape({
url: string, url: string,
fileClass: string fileClass: string
@ -69,7 +68,6 @@ const InputFineUploader = React.createClass({
}, },
submitFile(file) { submitFile(file) {
console.log(file);
this.setState({ this.setState({
file, file,
value: file.key value: file.key
@ -97,7 +95,6 @@ const InputFineUploader = React.createClass({
render() { render() {
const { fileInputElement, const { fileInputElement,
onClick,
keyRoutine, keyRoutine,
createBlobRoutine, createBlobRoutine,
validation, validation,
@ -120,7 +117,6 @@ const InputFineUploader = React.createClass({
<ReactS3FineUploader <ReactS3FineUploader
ref="fineuploader" ref="fineuploader"
fileInputElement={fileInputElement} fileInputElement={fileInputElement}
onClick={onClick}
keyRoutine={keyRoutine} keyRoutine={keyRoutine}
createBlobRoutine={createBlobRoutine} createBlobRoutine={createBlobRoutine}
validation={validation} 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); resolve(res.key);
}) })
.catch((err) => { .catch((err) => {
console.logGlobal(err, false, { this.onErrorPromiseProxy(err);
files: this.state.filesToUpload,
chunks: this.state.chunks
});
reject(err); reject(err);
}); });
}); });
@ -310,56 +307,57 @@ let ReactS3FineUploader = React.createClass({
createBlob(file) { createBlob(file) {
const { createBlobRoutine } = this.props; const { createBlobRoutine } = this.props;
// returning here without doing anything enables us to return Q.Promise((resolve, reject) => {
// lazy create the blob at any time after the upload
if(!createBlobRoutine) { // if createBlobRoutine is not defined,
return null; // we're progressing right away without posting to S3
} else { // so that this can be done manually by the form
return Q.Promise((resolve, reject) => { if(!createBlobRoutine) {
window.fetch(createBlobRoutine.url, { // still we warn the user of this component
method: 'post', console.warn('createBlobRoutine was not defined for ReactS3FineUploader. Continuing without creating the blob on the server.');
headers: { resolve();
'Accept': 'application/json', }
'Content-Type': 'application/json',
'X-CSRFToken': getCookie(AppConstants.csrftoken) window.fetch(createBlobRoutine.url, {
}, method: 'post',
credentials: 'include', headers: {
body: JSON.stringify({ 'Accept': 'application/json',
'filename': file.name, 'Content-Type': 'application/json',
'key': file.key, 'X-CSRFToken': getCookie(AppConstants.csrftoken)
'piece_id': createBlobRoutine.pieceId },
}) credentials: 'include',
body: JSON.stringify({
'filename': file.name,
'key': file.key,
'piece_id': createBlobRoutine.pieceId
}) })
.then((res) => { })
return res.json(); .then((res) => {
}) return res.json();
.then((res) => { })
if(res.otherdata) { .then((res) => {
file.s3Url = res.otherdata.url_safe; if(res.otherdata) {
file.s3UrlSafe = res.otherdata.url_safe; file.s3Url = res.otherdata.url_safe;
} else if(res.digitalwork) { file.s3UrlSafe = res.otherdata.url_safe;
file.s3Url = res.digitalwork.url_safe; } else if(res.digitalwork) {
file.s3UrlSafe = res.digitalwork.url_safe; file.s3Url = res.digitalwork.url_safe;
} else if(res.contractblob) { file.s3UrlSafe = res.digitalwork.url_safe;
file.s3Url = res.contractblob.url_safe; } else if(res.contractblob) {
file.s3UrlSafe = res.contractblob.url_safe; file.s3Url = res.contractblob.url_safe;
} else if(res.thumbnail) { file.s3UrlSafe = res.contractblob.url_safe;
file.s3Url = res.thumbnail.url_safe; } else if(res.thumbnail) {
file.s3UrlSafe = res.thumbnail.url_safe; file.s3Url = res.thumbnail.url_safe;
} else { file.s3UrlSafe = res.thumbnail.url_safe;
throw new Error(getLangText('Could not find a url to download.')); } else {
} throw new Error(getLangText('Could not find a url to download.'));
resolve(res); }
}) resolve(res);
.catch((err) => { })
console.logGlobal(err, false, { .catch((err) => {
files: this.state.filesToUpload, this.onErrorPromiseProxy(err);
chunks: this.state.chunks reject(err);
});
reject(err);
});
}); });
} });
}, },
/* FineUploader specific callback function handlers */ /* FineUploader specific callback function handlers */
@ -415,55 +413,51 @@ let ReactS3FineUploader = React.createClass({
let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: files }); let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: files });
this.setState({ filesToUpload }); this.setState({ filesToUpload });
const createBlobResult = this.createBlob(files[id]); // Only after the blob has been created server-side, we can make the form submittable.
if(!createBlobResult) { this.createBlob(files[id])
if(this.props.submitFile) { .then(() => {
this.props.submitFile(files[id]); // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile
} else { // are optional, we'll only trigger them when they're actually defined
console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader'); if(this.props.submitFile) {
} this.props.submitFile(files[id]);
} else { } else {
// Only after the blob has been created server-side, we can make the form submittable. console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader');
this.createBlob(files[id]) }
.then(() => { // for explanation, check comment of if statement above
// since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
// are optional, we'll only trigger them when they're actually defined // also, lets check if after the completion of this upload,
if(this.props.submitFile) { // the form is ready for submission or not
this.props.submitFile(files[id]); if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setIsUploadReady(true);
} else { } 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 } else {
if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) { console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
// 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)) { .catch(this.onErrorPromiseProxy);
// 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);
});
}
} }
}, },
/**
* 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) { onError(id, name, errorReason) {
console.logGlobal(errorReason, false, { console.logGlobal(errorReason, false, {
files: this.state.filesToUpload, files: this.state.filesToUpload,
chunks: this.state.chunks chunks: this.state.chunks
}); });
this.props.setIsUploadReady(true);
this.state.uploader.cancelAll(); this.state.uploader.cancelAll();
let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000); let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000);
@ -628,6 +622,10 @@ let ReactS3FineUploader = React.createClass({
}, },
handleUploadFile(files) { 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, // If multiple set and user already uploaded its work,
// cancel upload // cancel upload
if(!this.props.multiple && this.state.filesToUpload.filter(displayValidFilesFilter).length > 0) { 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(){ getInitialState(){
return { return {
isUploadReady: false, isUploadReady: true,
piece: null piece: null
}; };
}, },
@ -124,8 +124,15 @@ const PRRegisterPieceForm = React.createClass({
} }
}, },
setIsUploadReady(isUploadReady) {
this.setState({
isUploadReady
});
},
render() { render() {
const { location } = this.props; const { location } = this.props;
const { isUploadReady } = this.state;
return ( return (
<div className="register-piece--form"> <div className="register-piece--form">
@ -196,7 +203,7 @@ const PRRegisterPieceForm = React.createClass({
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}} setIsUploadReady={this.setIsUploadReady}
createBlobRoutine={{ createBlobRoutine={{
url: ApiUrls.blob_digitalworks url: ApiUrls.blob_digitalworks
}} }}
@ -226,7 +233,7 @@ const PRRegisterPieceForm = React.createClass({
url: ApiUrls.blob_thumbnails url: ApiUrls.blob_thumbnails
}} }}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}} setIsUploadReady={this.setIsUploadReady}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail' fileClass: 'thumbnail'
@ -249,7 +256,7 @@ const PRRegisterPieceForm = React.createClass({
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}} setIsUploadReady={this.setIsUploadReady}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
@ -272,7 +279,7 @@ const PRRegisterPieceForm = React.createClass({
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}} setIsUploadReady={this.setIsUploadReady}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
@ -307,6 +314,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}
onClick={this.submit}> onClick={this.submit}>
{getLangText('Submit to Portfolio Review')} {getLangText('Submit to Portfolio Review')}
</button> </button>