mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-368-harmonize-functionality-of-ascrib
Conflicts: js/components/ascribe_uploader/react_s3_fine_uploader.js
This commit is contained in:
diminator
commit
e36681ad4d
@ -7,6 +7,7 @@ import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterato
|
||||
// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
|
||||
var FileDragAndDrop = React.createClass({
|
||||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
onDragStart: React.PropTypes.func,
|
||||
onDrop: React.PropTypes.func.isRequired,
|
||||
onDrag: React.PropTypes.func,
|
||||
@ -17,6 +18,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
|
||||
},
|
||||
@ -59,7 +61,6 @@ var FileDragAndDrop = React.createClass({
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
handleDrop(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@ -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
|
||||
@ -99,9 +107,11 @@ var FileDragAndDrop = React.createClass({
|
||||
},
|
||||
|
||||
render: function () {
|
||||
let hasFiles = this.props.filesToUpload.length > 0;
|
||||
let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
|
||||
// has files only is true if there are files that do not have the status deleted or canceled
|
||||
let hasFiles = this.props.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0;
|
||||
let className = hasFiles ? 'has-files ' : '';
|
||||
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
|
||||
className += this.props.className ? ' ' + this.props.className : '';
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -114,10 +124,11 @@ var FileDragAndDrop = React.createClass({
|
||||
onDragOver={this.handleDragOver}
|
||||
onDrop={this.handleDrop}
|
||||
onDragEnd={this.handleDragEnd}>
|
||||
{hasFiles ? null : this.props.multiple ? <span>Click or drag to add files</span> : <span>Click or drag to add a file</span>}
|
||||
{hasFiles ? null : this.props.multiple ? <span className="file-drag-and-drop-dialog">Click or drag to add files</span> : <span className="file-drag-and-drop-dialog">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,17 +13,19 @@ 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) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
handleDeleteFile() {
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
import React from 'react';
|
||||
import ProgressBar from 'react-progressbar';
|
||||
|
||||
import AppConstants from '../../constants/application_constants';
|
||||
|
||||
let FileDragAndDropPreviewImage = React.createClass({
|
||||
propTypes: {
|
||||
progress: React.PropTypes.number,
|
||||
@ -10,19 +12,36 @@ let FileDragAndDropPreviewImage = React.createClass({
|
||||
onClick: React.PropTypes.func
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
onClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
this.props.onClick(e);
|
||||
},
|
||||
|
||||
render() {
|
||||
let imageStyle = {
|
||||
backgroundImage: 'url("' + this.props.url + '")',
|
||||
backgroundSize: 'cover'
|
||||
};
|
||||
|
||||
let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
|
||||
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}
|
||||
{actionSymbol}
|
||||
</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() {
|
||||
@ -15,12 +16,17 @@ let FileDragAndDropPreviewIterator = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
{this.props.files.map((file, i) => {
|
||||
if(file.status !== 'deleted' && file.status !== 'canceled') {
|
||||
return (
|
||||
<FileDragAndDropPreview
|
||||
key={i}
|
||||
file={file}
|
||||
handleDeleteFile={this.props.handleDeleteFile}/>
|
||||
handleDeleteFile={this.props.handleDeleteFile}
|
||||
handleCancelFile={this.props.handleCancelFile}/>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
import React from 'react';
|
||||
import ProgressBar from 'react-progressbar';
|
||||
|
||||
import AppConstants from '../../constants/application_constants';
|
||||
|
||||
let FileDragAndDropPreviewOther = React.createClass({
|
||||
propTypes: {
|
||||
type: React.PropTypes.string,
|
||||
@ -10,15 +12,32 @@ let FileDragAndDropPreviewOther = React.createClass({
|
||||
onClick: React.PropTypes.func
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
onClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
this.props.onClick(e);
|
||||
},
|
||||
|
||||
render() {
|
||||
let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
|
||||
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}
|
||||
{actionSymbol}
|
||||
<span>{'.' + this.props.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
13
js/components/ascribe_uploader/file_drag_and_drop_toolbar.js
Normal file
13
js/components/ascribe_uploader/file_drag_and_drop_toolbar.js
Normal file
@ -0,0 +1,13 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
let FileDragAndDropToolbar = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<div></div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default FileDragAndDropToolbar;
|
||||
@ -12,6 +12,7 @@ import { getCookie } from '../../utils/fetch_api_utils';
|
||||
|
||||
import fineUploader from 'fineUploader';
|
||||
import FileDragAndDrop from './file_drag_and_drop';
|
||||
import FileDragAndDropToolbar from './file_drag_and_drop_toolbar';
|
||||
|
||||
import GlobalNotificationModel from '../../models/global_notification_model';
|
||||
import GlobalNotificationActions from '../../actions/global_notification_actions';
|
||||
@ -27,7 +28,7 @@ var ReactS3FineUploader = React.createClass({
|
||||
createBlobRoutine: React.PropTypes.shape({
|
||||
url: React.PropTypes.string
|
||||
}),
|
||||
handleChange: React.PropTypes.func,
|
||||
submitKey: React.PropTypes.func,
|
||||
autoUpload: React.PropTypes.bool,
|
||||
debug: React.PropTypes.bool,
|
||||
objectProperties: React.PropTypes.shape({
|
||||
@ -63,7 +64,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,15 +81,11 @@ var ReactS3FineUploader = React.createClass({
|
||||
multiple: React.PropTypes.bool,
|
||||
retry: React.PropTypes.shape({
|
||||
enableAuto: React.PropTypes.bool
|
||||
})
|
||||
}),
|
||||
setUploadStatus: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
filesToUpload: [],
|
||||
uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
|
||||
};
|
||||
},
|
||||
getDefaultProps() {
|
||||
return {
|
||||
autoUpload: true,
|
||||
@ -147,6 +145,14 @@ var ReactS3FineUploader = React.createClass({
|
||||
multiple: false
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
filesToUpload: [],
|
||||
uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
|
||||
};
|
||||
},
|
||||
|
||||
propsToConfig() {
|
||||
let objectProperties = this.props.objectProperties;
|
||||
objectProperties.key = this.requestKey;
|
||||
@ -171,6 +177,7 @@ var ReactS3FineUploader = React.createClass({
|
||||
callbacks: {
|
||||
onSubmit: this.onSubmit,
|
||||
onComplete: this.onComplete,
|
||||
onCancel: this.onCancel,
|
||||
onDelete: this.onDelete,
|
||||
onSessionRequestComplete: this.onSessionRequestComplete,
|
||||
onProgress: this.onProgress,
|
||||
@ -235,8 +242,16 @@ var ReactS3FineUploader = React.createClass({
|
||||
});
|
||||
this.setState(newState);
|
||||
this.createBlob(files[id]);
|
||||
this.props.handleChange();
|
||||
console.log('completed ' + files[id].name);
|
||||
this.props.submitKey(files[id].key);
|
||||
|
||||
// also, lets check if after the completion of this upload,
|
||||
// the form is ready for submission or not
|
||||
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
|
||||
// if so, set uploadstatus to true
|
||||
this.props.setUploadStatus(true);
|
||||
} else {
|
||||
this.props.setUploadStatus(false);
|
||||
}
|
||||
},
|
||||
|
||||
createBlob(file) {
|
||||
@ -282,13 +297,18 @@ 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);
|
||||
|
||||
onSessionRequestComplete() {
|
||||
console.log('sessionrequestcomplete');
|
||||
let notification = new GlobalNotificationModel('File upload canceled', 'success', 5000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
|
||||
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
|
||||
// if so, set uploadstatus to true
|
||||
this.props.setUploadStatus(true);
|
||||
} else {
|
||||
this.props.setUploadStatus(false);
|
||||
}
|
||||
},
|
||||
|
||||
onDeleteComplete(id, xhr, isError) {
|
||||
@ -296,21 +316,18 @@ 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));
|
||||
this.removeFileWithIdFromFilesToUpload(id);
|
||||
|
||||
// splice because I can
|
||||
filesToUpload.splice(id, 1);
|
||||
|
||||
// set state
|
||||
let newState = React.addons.update(this.state, {
|
||||
filesToUpload: { $set: filesToUpload }
|
||||
});
|
||||
this.setState(newState);
|
||||
|
||||
let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
|
||||
let notification = new GlobalNotificationModel('File deleted', 'success', 5000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
}
|
||||
|
||||
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
|
||||
// if so, set uploadstatus to true
|
||||
this.props.setUploadStatus(true);
|
||||
} else {
|
||||
this.props.setUploadStatus(false);
|
||||
}
|
||||
},
|
||||
|
||||
onProgress(id, name, uploadedBytes, totalBytes) {
|
||||
@ -330,11 +347,15 @@ var ReactS3FineUploader = React.createClass({
|
||||
// promise
|
||||
},
|
||||
|
||||
handleCancelFile(fileId) {
|
||||
this.state.uploader.cancel(fileId);
|
||||
},
|
||||
|
||||
handleUploadFile(files) {
|
||||
|
||||
// If multiple set and user already uploaded its work,
|
||||
// cancel upload
|
||||
if(!this.props.multiple && this.state.filesToUpload.length > 0) {
|
||||
if(!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -373,24 +394,45 @@ var ReactS3FineUploader = React.createClass({
|
||||
oldAndNewFiles[i].progress = oldFiles[j].progress;
|
||||
oldAndNewFiles[i].type = oldFiles[j].type;
|
||||
oldAndNewFiles[i].url = oldFiles[j].url;
|
||||
oldAndNewFiles[i].key = oldFiles[j].key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// set the new file array
|
||||
let newState = React.addons.update(this.state, {
|
||||
filesToUpload: { $set: oldAndNewFiles }
|
||||
});
|
||||
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 (
|
||||
<div>
|
||||
<FileDragAndDrop
|
||||
className="file-drag-and-drop"
|
||||
onDrop={this.handleUploadFile}
|
||||
filesToUpload={this.state.filesToUpload}
|
||||
handleDeleteFile={this.handleDeleteFile}
|
||||
handleCancelFile={this.handleCancelFile}
|
||||
multiple={this.props.multiple}
|
||||
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
|
||||
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
|
||||
<FileDragAndDropToolbar />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -434,12 +434,40 @@ let EditionFurtherDetails = React.createClass({
|
||||
edition: React.PropTypes.object,
|
||||
handleSuccess: React.PropTypes.func
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
showNotification(){
|
||||
this.props.handleSuccess();
|
||||
let notification = new GlobalNotificationModel('Details updated', 'success');
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
},
|
||||
|
||||
submitKey(key){
|
||||
this.setState({
|
||||
otherDataKey: key
|
||||
});
|
||||
},
|
||||
|
||||
setUploadStatus(isReady) {
|
||||
this.setState({
|
||||
uploadStatus: isReady
|
||||
});
|
||||
},
|
||||
|
||||
isReadyForFormSubmission(files) {
|
||||
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
|
||||
if(files.length > 0 && files[0].status === 'upload successful') {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
let editable = this.props.edition.acl.indexOf('edit') > -1;
|
||||
return (
|
||||
@ -464,22 +492,26 @@ let EditionFurtherDetails = React.createClass({
|
||||
editable={editable}
|
||||
edition={this.props.edition} />
|
||||
<FileUploader
|
||||
edition={this.props.edition}
|
||||
ref='uploader'/>
|
||||
submitKey={this.submitKey}
|
||||
setUploadStatus={this.setUploadStatus}
|
||||
isReadyForFormSubmission={this.isReadyForFormSubmission}
|
||||
edition={this.props.edition}/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
let FileUploader = React.createClass( {
|
||||
handleChange(){
|
||||
this.setState({other_data_key: this.refs.fineuploader.state.filesToUpload[0].key});
|
||||
let FileUploader = React.createClass({
|
||||
propTypes: {
|
||||
setUploadStatus: React.PropTypes.func,
|
||||
submitKey: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ReactS3FineUploader
|
||||
ref='fineuploader'
|
||||
keyRoutine={{
|
||||
url: AppConstants.serverUrl + 's3/key/',
|
||||
fileClass: 'otherdata',
|
||||
@ -488,11 +520,13 @@ let FileUploader = React.createClass( {
|
||||
createBlobRoutine={{
|
||||
url: apiUrls.blob_digitalworks
|
||||
}}
|
||||
handleChange={this.handleChange}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
sizeLimit: '10000000'
|
||||
}}/>
|
||||
}}
|
||||
submitKey={this.props.submitKey}
|
||||
setUploadStatus={this.props.setUploadStatus}
|
||||
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -24,8 +24,12 @@ let RegisterPiece = React.createClass( {
|
||||
mixins: [Router.Navigation],
|
||||
|
||||
getInitialState(){
|
||||
return {digital_work_key: null};
|
||||
return {
|
||||
digitalWorkKey: null,
|
||||
uploadStatus: false
|
||||
};
|
||||
},
|
||||
|
||||
handleSuccess(){
|
||||
let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
@ -37,30 +41,44 @@ let RegisterPiece = React.createClass( {
|
||||
for (let ref in this.refs.form.refs){
|
||||
data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value;
|
||||
}
|
||||
data.digital_work_key = this.state.digital_work_key;
|
||||
data.digital_work_key = this.state.digitalWorkKey;
|
||||
return data;
|
||||
},
|
||||
handleChange(){
|
||||
this.setState({digital_work_key: this.refs.uploader.refs.fineuploader.state.filesToUpload[0].key});
|
||||
|
||||
submitKey(key){
|
||||
this.setState({
|
||||
digitalWorkKey: key
|
||||
});
|
||||
},
|
||||
|
||||
setUploadStatus(isReady) {
|
||||
this.setState({
|
||||
uploadStatus: isReady
|
||||
});
|
||||
},
|
||||
|
||||
isReadyForFormSubmission(files) {
|
||||
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
|
||||
if(files.length > 0 && files[0].status === 'upload successful') {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
let buttons = null;
|
||||
if (this.refs.uploader && this.refs.uploader.refs.fineuploader.state.filesToUpload[0].status === 'upload successful'){
|
||||
|
||||
if (this.state.uploadStatus){
|
||||
buttons = (
|
||||
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
|
||||
Register your artwork
|
||||
</button>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="row ascribe-row">
|
||||
<div className="col-md-5">
|
||||
<FileUploader
|
||||
ref='uploader'
|
||||
handleChange={this.handleChange}/>
|
||||
<br />
|
||||
</div>
|
||||
<div className="col-md-7">
|
||||
<div className="col-md-12">
|
||||
<h3 style={{'marginTop': 0}}>Lock down title</h3>
|
||||
<Form
|
||||
ref='form'
|
||||
@ -73,6 +91,13 @@ let RegisterPiece = React.createClass( {
|
||||
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
|
||||
</button>
|
||||
}>
|
||||
<Property
|
||||
label="Files to upload">
|
||||
<FileUploader
|
||||
submitKey={this.submitKey}
|
||||
setUploadStatus={this.setUploadStatus}
|
||||
isReadyForFormSubmission={this.isReadyForFormSubmission}/>
|
||||
</Property>
|
||||
<Property
|
||||
name='artist_name'
|
||||
label="Artist Name">
|
||||
@ -116,11 +141,16 @@ let RegisterPiece = React.createClass( {
|
||||
});
|
||||
|
||||
|
||||
let FileUploader = React.createClass( {
|
||||
let FileUploader = React.createClass({
|
||||
propTypes: {
|
||||
setUploadStatus: React.PropTypes.func,
|
||||
submitKey: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ReactS3FineUploader
|
||||
ref='fineuploader'
|
||||
keyRoutine={{
|
||||
url: AppConstants.serverUrl + 's3/key/',
|
||||
fileClass: 'digitalwork'
|
||||
@ -128,11 +158,13 @@ let FileUploader = React.createClass( {
|
||||
createBlobRoutine={{
|
||||
url: apiUrls.blob_digitalworks
|
||||
}}
|
||||
handleChange={this.props.handleChange}
|
||||
submitKey={this.props.submitKey}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
sizeLimit: '25000000000'
|
||||
}}/>
|
||||
}}
|
||||
setUploadStatus={this.props.setUploadStatus}
|
||||
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -68,12 +68,14 @@
|
||||
|
||||
padding-top: 1em;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
|
||||
cursor:pointer;
|
||||
|
||||
input, div, span, pre, textarea, select {
|
||||
input, div, span:not(.glyphicon), pre, textarea, select {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: 0.9em;
|
||||
@ -81,8 +83,8 @@
|
||||
}
|
||||
|
||||
div {
|
||||
margin-top: 10px;
|
||||
div {
|
||||
/* margin-top: 10px; */
|
||||
div:not(.file-drag-and-drop div) {
|
||||
padding-left: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
@ -92,6 +94,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar-container, .progressbar-progress {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
input, pre, textarea, select {
|
||||
font-weight: 400;
|
||||
font-size: 1.1em;
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
.file-drag-and-drop {
|
||||
display: table-cell;
|
||||
display: block;
|
||||
outline: 1px dashed #616161;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
height:208px;
|
||||
width: 672px;
|
||||
height: auto;
|
||||
background-color: #FAFAFA;
|
||||
transition: .1s linear background-color;
|
||||
overflow: auto;
|
||||
margin-top: 1em;
|
||||
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
.inactive-dropzone {
|
||||
@ -22,25 +24,34 @@
|
||||
background-color: rgba(72, 218, 203, 0.2);
|
||||
}
|
||||
|
||||
.file-drag-and-drop > span {
|
||||
font-size: 1.5em;
|
||||
.file-drag-and-drop .file-drag-and-drop-dialog {
|
||||
font-size: 1.25em !important;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.has-files {
|
||||
text-align: left;
|
||||
padding: 3em 0 0 0;
|
||||
padding: 4% 0 0 0;
|
||||
}
|
||||
|
||||
.file-drag-and-drop-position {
|
||||
display: inline-block;
|
||||
margin: 0 0 3em 3em;
|
||||
margin: 0 0 4% 4%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.file-drag-and-drop-preview-table-wrapper {
|
||||
display: table;
|
||||
height:94px;
|
||||
width:104px;
|
||||
height:64px;
|
||||
width:74px;
|
||||
}
|
||||
|
||||
.file-drag-and-drop-preview {
|
||||
@ -52,16 +63,16 @@
|
||||
|
||||
.file-drag-and-drop-preview-image {
|
||||
display: table;
|
||||
height:104px;
|
||||
width:104px;
|
||||
height:74px;
|
||||
width:74px;
|
||||
overflow:hidden;
|
||||
border: 1px solid #616161;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-drag-and-drop-preview-image .delete-file {
|
||||
font-size: 3em;
|
||||
margin-top: .5em;
|
||||
font-size: 2.5em;
|
||||
margin-top: .3em;
|
||||
color: white;
|
||||
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
|
||||
cursor: pointer;
|
||||
@ -73,9 +84,9 @@
|
||||
|
||||
.file-drag-and-drop-preview-other .delete-file {
|
||||
position: relative;
|
||||
top: .45em;
|
||||
top: .3em;
|
||||
margin-top: 0;
|
||||
font-size: 3em;
|
||||
font-size: 2.5em;
|
||||
color: white;
|
||||
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
|
||||
cursor: pointer;
|
||||
@ -94,5 +105,5 @@
|
||||
|
||||
.file-drag-and-drop-preview-other span:not(:first-child) {
|
||||
display: block;
|
||||
margin-top: 1.5em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user