mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 01:39:36 +01:00
implement cancel functionality
This commit is contained in:
parent
12da6c1426
commit
66fff1c50a
@ -17,6 +17,7 @@ var FileDragAndDrop = React.createClass({
|
||||
onDragEnd: React.PropTypes.func,
|
||||
filesToUpload: React.PropTypes.array,
|
||||
handleDeleteFile: React.PropTypes.func,
|
||||
handleCancelFile: React.PropTypes.func,
|
||||
multiple: React.PropTypes.bool,
|
||||
dropzoneInactive: React.PropTypes.bool
|
||||
},
|
||||
@ -85,6 +86,13 @@ var FileDragAndDrop = React.createClass({
|
||||
this.props.handleDeleteFile(fileId);
|
||||
},
|
||||
|
||||
handleCancelFile(fileId) {
|
||||
// input's value is not change the second time someone
|
||||
// inputs the same file again, therefore we need to reset its value
|
||||
this.refs.fileinput.getDOMNode().value = '';
|
||||
this.props.handleCancelFile(fileId);
|
||||
},
|
||||
|
||||
handleOnClick() {
|
||||
// when multiple is set to false and the user already uploaded a piece,
|
||||
// do not propagate event
|
||||
@ -117,7 +125,8 @@ var FileDragAndDrop = React.createClass({
|
||||
{hasFiles ? null : this.props.multiple ? <span>Click or drag to add files</span> : <span>Click or drag to add a file</span>}
|
||||
<FileDragAndDropPreviewIterator
|
||||
files={this.props.filesToUpload}
|
||||
handleDeleteFile={this.handleDeleteFile}/>
|
||||
handleDeleteFile={this.handleDeleteFile}
|
||||
handleCancelFile={this.handleCancelFile}/>
|
||||
<input
|
||||
multiple={this.props.multiple}
|
||||
ref="fileinput"
|
||||
|
@ -13,7 +13,8 @@ let FileDragAndDropPreview = React.createClass({
|
||||
url: React.PropTypes.string,
|
||||
type: React.PropTypes.string
|
||||
}).isRequired,
|
||||
handleDeleteFile: React.PropTypes.func
|
||||
handleDeleteFile: React.PropTypes.func,
|
||||
handleCancelFile: React.PropTypes.func
|
||||
},
|
||||
|
||||
handleDeleteFile(event) {
|
||||
@ -22,8 +23,12 @@ let FileDragAndDropPreview = React.createClass({
|
||||
|
||||
// handleDeleteFile is optional, so if its not submitted,
|
||||
// don't run it
|
||||
if(this.props.handleDeleteFile) {
|
||||
// On the other hand, if the files progress is not yet at a 100%,
|
||||
// just run fineuploader.cancel
|
||||
if(this.props.handleDeleteFile && this.props.file.progress === 100) {
|
||||
this.props.handleDeleteFile(this.props.file.id);
|
||||
} else if(this.props.handleCancelFile && this.props.file.progress !== 100) {
|
||||
this.props.handleCancelFile(this.props.file.id);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -18,11 +18,15 @@ let FileDragAndDropPreviewImage = React.createClass({
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={this.props.onClick}
|
||||
className="file-drag-and-drop-preview-image"
|
||||
style={imageStyle}>
|
||||
<ProgressBar completed={this.props.progress} color="black"/>
|
||||
{this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
|
||||
<span
|
||||
className="glyphicon glyphicon-remove delete-file"
|
||||
aria-hidden="true"
|
||||
title="Delete"
|
||||
onClick={this.props.onClick}>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -7,7 +7,8 @@ import FileDragAndDropPreview from './file_drag_and_drop_preview';
|
||||
let FileDragAndDropPreviewIterator = React.createClass({
|
||||
propTypes: {
|
||||
files: React.PropTypes.array,
|
||||
handleDeleteFile: React.PropTypes.func
|
||||
handleDeleteFile: React.PropTypes.func,
|
||||
handleCancelFile: React.PropTypes.func
|
||||
},
|
||||
|
||||
render() {
|
||||
@ -19,7 +20,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
|
||||
<FileDragAndDropPreview
|
||||
key={i}
|
||||
file={file}
|
||||
handleDeleteFile={this.props.handleDeleteFile}/>
|
||||
handleDeleteFile={this.props.handleDeleteFile}
|
||||
handleCancelFile={this.props.handleCancelFile}/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
@ -13,12 +13,17 @@ let FileDragAndDropPreviewOther = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
onClick={this.props.onClick}
|
||||
|
||||
className="file-drag-and-drop-preview">
|
||||
<ProgressBar completed={this.props.progress} color="black"/>
|
||||
<div className="file-drag-and-drop-preview-table-wrapper">
|
||||
<div className="file-drag-and-drop-preview-other">
|
||||
{this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
|
||||
<span
|
||||
className="glyphicon glyphicon-remove delete-file"
|
||||
aria-hidden="true"
|
||||
title="Delete"
|
||||
onClick={this.props.onClick}>
|
||||
</span>
|
||||
<span>{'.' + this.props.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -59,7 +59,8 @@ var ReactS3FineUploader = React.createClass({
|
||||
deleteFile: React.PropTypes.shape({
|
||||
enabled: React.PropTypes.bool,
|
||||
method: React.PropTypes.string,
|
||||
endpoint: React.PropTypes.string
|
||||
endpoint: React.PropTypes.string,
|
||||
customHeaders: React.PropTypes.object
|
||||
}),
|
||||
session: React.PropTypes.shape({
|
||||
endpoint: React.PropTypes.bool
|
||||
@ -79,6 +80,7 @@ var ReactS3FineUploader = React.createClass({
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
console.log(this.props);
|
||||
return {
|
||||
filesToUpload: [],
|
||||
uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
|
||||
@ -109,6 +111,7 @@ var ReactS3FineUploader = React.createClass({
|
||||
callbacks: {
|
||||
onSubmit: this.onSubmit,
|
||||
onComplete: this.onComplete,
|
||||
onCancel: this.onCancel,
|
||||
onDelete: this.onDelete,
|
||||
onSessionRequestComplete: this.onSessionRequestComplete,
|
||||
onProgress: this.onProgress,
|
||||
@ -219,9 +222,11 @@ var ReactS3FineUploader = React.createClass({
|
||||
console.log('delete');
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
console.log('cancel');
|
||||
// handle file removal here, for this.state.filesToUpload (same as in onDeleteComplete)
|
||||
onCancel(id) {
|
||||
this.removeFileWithIdFromFilesToUpload(id);
|
||||
|
||||
let notification = new GlobalNotificationModel('File upload canceled', 'success', 10000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
},
|
||||
|
||||
onSessionRequestComplete() {
|
||||
@ -233,17 +238,7 @@ var ReactS3FineUploader = React.createClass({
|
||||
let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
} else {
|
||||
// also, sync files from state with the ones from fineuploader
|
||||
let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
|
||||
|
||||
// splice because I can
|
||||
filesToUpload.splice(id, 1);
|
||||
|
||||
// set state
|
||||
let newState = React.addons.update(this.state, {
|
||||
filesToUpload: { $set: filesToUpload }
|
||||
});
|
||||
this.setState(newState);
|
||||
this.removeFileWithIdFromFilesToUpload(id);
|
||||
|
||||
let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
@ -267,6 +262,10 @@ var ReactS3FineUploader = React.createClass({
|
||||
// promise
|
||||
},
|
||||
|
||||
handleCancelFile(fileId) {
|
||||
this.state.uploader.cancel(fileId);
|
||||
},
|
||||
|
||||
handleUploadFile(files) {
|
||||
|
||||
// If multiple set and user already uploaded its work,
|
||||
@ -320,13 +319,28 @@ var ReactS3FineUploader = React.createClass({
|
||||
this.setState(newState);
|
||||
},
|
||||
|
||||
removeFileWithIdFromFilesToUpload(fileId) {
|
||||
// also, sync files from state with the ones from fineuploader
|
||||
let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
|
||||
|
||||
// splice because I can
|
||||
filesToUpload.splice(fileId, 1);
|
||||
|
||||
// set state
|
||||
let newState = React.addons.update(this.state, {
|
||||
filesToUpload: { $set: filesToUpload }
|
||||
});
|
||||
this.setState(newState);
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FileDragAndDrop
|
||||
onDrop={this.handleUploadFile}
|
||||
filesToUpload={this.state.filesToUpload}
|
||||
handleDeleteFile={this.handleDeleteFile}
|
||||
multiple={this.props.multiple}
|
||||
handleCancelFile={this.handleCancelFile}
|
||||
multiple={this.props.multiple}
|
||||
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
|
||||
);
|
||||
}
|
||||
|
@ -115,7 +115,14 @@ let RegisterPiece = React.createClass( {
|
||||
});
|
||||
|
||||
|
||||
let FileUploader = 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();
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<ReactS3FineUploader
|
||||
@ -161,7 +168,10 @@ let FileUploader = React.createClass( {
|
||||
deleteFile={{
|
||||
enabled: true,
|
||||
method: 'DELETE',
|
||||
endpoint: AppConstants.serverUrl + 's3/delete'
|
||||
endpoint: AppConstants.serverUrl + 's3/delete',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': 'asdasd'
|
||||
}
|
||||
}}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
|
Loading…
Reference in New Issue
Block a user