mirror of
https://github.com/ascribe/onion.git
synced 2024-06-28 00:28:00 +02:00
Changing behavior for ReactS3Fineuploader not having access to createBlobRoutine
This commit is contained in:
Tim Daubenschütz
parent
0438f461c2
commit
62f19467b7
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user