mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
WIP: make fineuploader an input
This commit is contained in:
Tim Daubenschütz
parent
c33976ad37
commit
c3b71b5398
@ -39,7 +39,7 @@ let FurtherDetailsFileuploader = React.createClass({
|
||||
return null;
|
||||
}
|
||||
|
||||
let otherDataIds = this.props.otherData ? this.props.otherData.map((data)=>{return data.id; }).join() : null;
|
||||
let otherDataIds = this.props.otherData ? this.props.otherData.map((data) => data.id).join() : null;
|
||||
|
||||
return (
|
||||
<Property
|
||||
|
||||
@ -60,8 +60,9 @@ let Form = React.createClass({
|
||||
};
|
||||
},
|
||||
|
||||
reset(){
|
||||
for (let ref in this.refs){
|
||||
reset() {
|
||||
console.log(this.refs);
|
||||
for(let ref in this.refs) {
|
||||
if (typeof this.refs[ref].reset === 'function'){
|
||||
this.refs[ref].reset();
|
||||
}
|
||||
@ -70,7 +71,6 @@ let Form = React.createClass({
|
||||
},
|
||||
|
||||
submit(event){
|
||||
|
||||
if(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
@ -100,16 +100,18 @@ let Form = React.createClass({
|
||||
.catch(this.handleError);
|
||||
},
|
||||
|
||||
getFormData(){
|
||||
getFormData() {
|
||||
let data = {};
|
||||
for (let ref in this.refs){
|
||||
data[this.refs[ref].props.name] = this.refs[ref].state.value;
|
||||
}
|
||||
|
||||
if ('getFormData' in this.props){
|
||||
console.log(this.props);
|
||||
if (this.props.getFormData){
|
||||
data = mergeOptionsWithDuplicates(data, this.props.getFormData());
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
return data;
|
||||
},
|
||||
|
||||
@ -136,7 +138,7 @@ let Form = React.createClass({
|
||||
if (err.json) {
|
||||
for (var input in err.json.errors){
|
||||
if (this.refs && this.refs[input] && this.refs[input].state) {
|
||||
this.refs[input].setErrors( err.json.errors[input]);
|
||||
this.refs[input].setErrors(err.json.errors[input]);
|
||||
} else {
|
||||
this.setState({errors: this.state.errors.concat(err.json.errors[input])});
|
||||
}
|
||||
@ -206,7 +208,7 @@ let Form = React.createClass({
|
||||
},
|
||||
|
||||
renderChildren() {
|
||||
return ReactAddons.Children.map(this.props.children, (child) => {
|
||||
return ReactAddons.Children.map(this.props.children, (child, i) => {
|
||||
if (child) {
|
||||
return ReactAddons.addons.cloneWithProps(child, {
|
||||
handleChange: this.handleChangeChild,
|
||||
@ -251,6 +253,7 @@ let Form = React.createClass({
|
||||
role="form"
|
||||
className={className}
|
||||
onSubmit={this.submit}
|
||||
onReset={this.reset}
|
||||
autoComplete={this.props.autoComplete}>
|
||||
{this.getFakeAutocompletableInputs()}
|
||||
{this.getErrors()}
|
||||
|
||||
@ -7,13 +7,10 @@ import UserActions from '../../actions/user_actions';
|
||||
|
||||
import Form from './form';
|
||||
import Property from './property';
|
||||
import InputFineUploader from './input_fineuploader';
|
||||
|
||||
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
|
||||
|
||||
import AppConstants from '../../constants/application_constants';
|
||||
import ApiUrls from '../../constants/api_urls';
|
||||
|
||||
import { getCookie } from '../../utils/fetch_api_utils';
|
||||
import { getLangText } from '../../utils/lang_utils';
|
||||
import { mergeOptions } from '../../utils/general_utils';
|
||||
import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
|
||||
@ -45,7 +42,6 @@ let RegisterPieceForm = React.createClass({
|
||||
getInitialState(){
|
||||
return mergeOptions(
|
||||
{
|
||||
digitalWorkKey: null,
|
||||
isUploadReady: false
|
||||
},
|
||||
UserStore.getState()
|
||||
@ -65,18 +61,6 @@ let RegisterPieceForm = React.createClass({
|
||||
this.setState(state);
|
||||
},
|
||||
|
||||
getFormData(){
|
||||
return {
|
||||
digital_work_key: this.state.digitalWorkKey
|
||||
};
|
||||
},
|
||||
|
||||
submitKey(key){
|
||||
this.setState({
|
||||
digitalWorkKey: key
|
||||
});
|
||||
},
|
||||
|
||||
setIsUploadReady(isReady) {
|
||||
this.setState({
|
||||
isUploadReady: isReady
|
||||
@ -94,14 +78,22 @@ let RegisterPieceForm = React.createClass({
|
||||
className="ascribe-form-bordered"
|
||||
ref='form'
|
||||
url={ApiUrls.pieces_list}
|
||||
getFormData={this.getFormData}
|
||||
handleSuccess={this.props.handleSuccess}
|
||||
buttons={<button
|
||||
buttons={
|
||||
<span>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn ascribe-btn ascribe-btn-login"
|
||||
disabled={!this.state.isUploadReady || this.props.disabled}>
|
||||
{this.props.submitMessage}
|
||||
</button>}
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn ascribe-btn ascribe-btn-login">
|
||||
Reset
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
spinner={
|
||||
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
|
||||
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
|
||||
@ -111,9 +103,9 @@ let RegisterPieceForm = React.createClass({
|
||||
<h3>{this.props.headerMessage}</h3>
|
||||
</div>
|
||||
<Property
|
||||
name="digital_work_key"
|
||||
ignoreFocus={true}>
|
||||
<FileUploader
|
||||
submitKey={this.submitKey}
|
||||
<InputFineUploader
|
||||
setIsUploadReady={this.setIsUploadReady}
|
||||
isReadyForFormSubmission={isReadyForFormSubmission}
|
||||
isFineUploaderActive={this.props.isFineUploaderActive}
|
||||
@ -152,73 +144,4 @@ let RegisterPieceForm = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
let FileUploader = React.createClass({
|
||||
propTypes: {
|
||||
setIsUploadReady: React.PropTypes.func,
|
||||
submitKey: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func,
|
||||
onClick: React.PropTypes.func,
|
||||
|
||||
// isFineUploaderActive is used to lock react fine uploader in case
|
||||
// a user is actually not logged in already to prevent him from droping files
|
||||
// before login in
|
||||
isFineUploaderActive: React.PropTypes.bool,
|
||||
onLoggedOut: React.PropTypes.func,
|
||||
editable: React.PropTypes.bool,
|
||||
enableLocalHashing: React.PropTypes.bool,
|
||||
|
||||
// provided by Property
|
||||
disabled: React.PropTypes.bool
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
let editable = this.props.isFineUploaderActive;
|
||||
|
||||
// if disabled is actually set by property, we want to override
|
||||
// isFineUploaderActive
|
||||
if(typeof this.props.disabled !== 'undefined') {
|
||||
editable = !this.props.disabled;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<ReactS3FineUploader
|
||||
onClick={this.props.onClick}
|
||||
keyRoutine={{
|
||||
url: AppConstants.serverUrl + 's3/key/',
|
||||
fileClass: 'digitalwork'
|
||||
}}
|
||||
createBlobRoutine={{
|
||||
url: ApiUrls.blob_digitalworks
|
||||
}}
|
||||
submitKey={this.props.submitKey}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
sizeLimit: '25000000000'
|
||||
}}
|
||||
setIsUploadReady={this.props.setIsUploadReady}
|
||||
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
|
||||
areAssetsDownloadable={false}
|
||||
areAssetsEditable={editable}
|
||||
signature={{
|
||||
endpoint: AppConstants.serverUrl + 's3/signature/',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
||||
}
|
||||
}}
|
||||
deleteFile={{
|
||||
enabled: true,
|
||||
method: 'DELETE',
|
||||
endpoint: AppConstants.serverUrl + 's3/delete',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
||||
}
|
||||
}}
|
||||
onInactive={this.props.onLoggedOut}
|
||||
enableLocalHashing={this.props.enableLocalHashing} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default RegisterPieceForm;
|
||||
|
||||
93
js/components/ascribe_forms/input_fineuploader.js
Normal file
93
js/components/ascribe_forms/input_fineuploader.js
Normal file
@ -0,0 +1,93 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
|
||||
|
||||
import AppConstants from '../../constants/application_constants';
|
||||
import ApiUrls from '../../constants/api_urls';
|
||||
|
||||
import { getCookie } from '../../utils/fetch_api_utils';
|
||||
|
||||
let InputFileUploader = React.createClass({
|
||||
propTypes: {
|
||||
setIsUploadReady: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func,
|
||||
onClick: React.PropTypes.func,
|
||||
|
||||
// isFineUploaderActive is used to lock react fine uploader in case
|
||||
// a user is actually not logged in already to prevent him from droping files
|
||||
// before login in
|
||||
isFineUploaderActive: React.PropTypes.bool,
|
||||
onLoggedOut: React.PropTypes.func,
|
||||
editable: React.PropTypes.bool,
|
||||
enableLocalHashing: React.PropTypes.bool,
|
||||
|
||||
// provided by Property
|
||||
disabled: React.PropTypes.bool
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
value: null
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
submitKey(key){
|
||||
this.setState({
|
||||
value: key
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
let editable = this.props.isFineUploaderActive;
|
||||
|
||||
// if disabled is actually set by property, we want to override
|
||||
// isFineUploaderActive
|
||||
if(typeof this.props.disabled !== 'undefined') {
|
||||
editable = !this.props.disabled;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<ReactS3FineUploader
|
||||
onClick={this.props.onClick}
|
||||
keyRoutine={{
|
||||
url: AppConstants.serverUrl + 's3/key/',
|
||||
fileClass: 'digitalwork'
|
||||
}}
|
||||
createBlobRoutine={{
|
||||
url: ApiUrls.blob_digitalworks
|
||||
}}
|
||||
submitKey={this.submitKey}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
sizeLimit: '25000000000'
|
||||
}}
|
||||
setIsUploadReady={this.props.setIsUploadReady}
|
||||
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
|
||||
areAssetsDownloadable={false}
|
||||
areAssetsEditable={editable}
|
||||
signature={{
|
||||
endpoint: AppConstants.serverUrl + 's3/signature/',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
||||
}
|
||||
}}
|
||||
deleteFile={{
|
||||
enabled: true,
|
||||
method: 'DELETE',
|
||||
endpoint: AppConstants.serverUrl + 's3/delete',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
||||
}
|
||||
}}
|
||||
onInactive={this.props.onLoggedOut}
|
||||
enableLocalHashing={this.props.enableLocalHashing} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default InputFileUploader;
|
||||
Loading…
Reference in New Issue
Block a user