ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

Shuffle uploader props to be more readable

Browse Source
This commit is contained in:
Brett Sun 2015-12-08 18:09:24 +01:00
parent 9b54a75e27
commit a0db6d3037
4 changed files with 140 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
js/components/ascribe_detail/further_details_fileuploader.js
View File

@ -11,15 +11,21 @@ import AppConstants from '../../constants/application_constants';
import { getCookie } from '../../utils/fetch_api_utils';
const { func, bool, number, object, arrayOf } = React.PropTypes;
let FurtherDetailsFileuploader = React.createClass({
propTypes: {
pieceId: React.PropTypes.number,
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
setIsUploadReady: React.PropTypes.func,
submitFile: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func,
editable: React.PropTypes.bool,
multiple: React.PropTypes.bool
pieceId: number,
otherData: arrayOf(object),
editable: bool,
// Props for ReactS3FineUploader
multiple: bool,
submitFile: func, // TODO: rename to onSubmitFile
setIsUploadReady: func, //TODO: rename to setIsUploaderValidated
isReadyForFormSubmission: func
},
getDefaultProps() {
@ -29,16 +35,25 @@ let FurtherDetailsFileuploader = React.createClass({
},
render() {
const {
editable,
isReadyForFormSubmission,
multiple,
otherData,
pieceId,
setIsUploadReady,
submitFile } = this.props;
// Essentially there a three cases important to the fileuploader
//
// 1. there is no other_data => do not show the fileuploader at all (where otherData is now an array)
// 2. there is other_data, but user has no edit rights => show fileuploader but without action buttons
// 3. both other_data and editable are defined or true => show fileuploader with all action buttons
if (!this.props.editable && (!this.props.otherData || this.props.otherData.length === 0)) {
if (!editable && (!otherData || otherData.length === 0)) {
return null;
}
let otherDataIds = this.props.otherData ? this.props.otherData.map((data) => data.id).join() : null;
let otherDataIds = otherData ? otherData.map((data) => data.id).join() : null;
return (
<Property
@ -48,16 +63,16 @@ let FurtherDetailsFileuploader = React.createClass({
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'otherdata',
pieceId: this.props.pieceId
pieceId: pieceId
}}
createBlobRoutine={{
url: ApiUrls.blob_otherdatas,
pieceId: this.props.pieceId
pieceId: pieceId
}}
validation={AppConstants.fineUploader.validation.additionalData}
submitFile={this.props.submitFile}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
submitFile={submitFile}
setIsUploadReady={setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
session={{
endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
customHeaders: {

79
js/components/ascribe_forms/input_fineuploader.js
View File

@ -10,49 +10,62 @@ import AppConstants from '../../constants/application_constants';
import { getCookie } from '../../utils/fetch_api_utils';
const { func, bool, shape, string, number, arrayOf } = React.PropTypes;
const { func, bool, shape, string, number, element, oneOf, arrayOf } = React.PropTypes;
const InputFineUploader = React.createClass({
propTypes: {
setIsUploadReady: func,
isReadyForFormSubmission: func,
submitFile: func,
fileInputElement: func,
areAssetsDownloadable: bool,
keyRoutine: shape({
url: string,
fileClass: string
}),
createBlobRoutine: shape({
url: string
}),
validation: shape({
itemLimit: number,
sizeLimit: string,
allowedExtensions: arrayOf(string)
}),
// 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: bool,
onLoggedOut: func,
enableLocalHashing: bool,
uploadMethod: string,
// provided by Property
disabled: bool,
// A class of a file the user has to upload
// Needs to be defined both in singular as well as in plural
// Props for ReactS3FineUploader
areAssetsDownloadable: bool,
handleChangedFile: func, // TODO: rename to onChangedFile
submitFile: func, // TODO: rename to onSubmitFile
setIsUploadReady: func, //TODO: rename to setIsUploaderValidated
isReadyForFormSubmission: func,
enableLocalHashing: bool,
uploadMethod: oneOf(['hash', 'upload']),
fileClassToUpload: shape({
singular: string,
plural: string
}),
handleChangedFile: func
fileInputElement: oneOfType([
func,
element
]),
keyRoutine: shape({
url: string,
fileClass: string,
pieceId: oneOfType([
string,
number
])
}),
createBlobRoutine: shape({
url: string,
pieceId: oneOfType([
string,
number
])
}),
validation: shape({
itemLimit: number,
sizeLimit: string,
allowedExtensions: arrayOf(string)
})
},
getDefaultProps() {
@ -101,18 +114,20 @@ const InputFineUploader = React.createClass({
validation,
setIsUploadReady,
isReadyForFormSubmission,
isFineUploaderActive,
areAssetsDownloadable,
onLoggedOut,
enableLocalHashing,
fileClassToUpload,
uploadMethod,
handleChangedFile } = this.props;
let editable = this.props.isFineUploaderActive;
handleChangedFile,
disabled } = this.props;
let editable = isFineUploaderActive;
// if disabled is actually set by property, we want to override
// isFineUploaderActive
if(typeof this.props.disabled !== 'undefined') {
editable = !this.props.disabled;
if(typeof disabled !== 'undefined') {
editable = !disabled;
}
return (
@ -145,7 +160,7 @@ const InputFineUploader = React.createClass({
enableLocalHashing={enableLocalHashing}
uploadMethod={uploadMethod}
fileClassToUpload={fileClassToUpload}
handleChangedFile={handleChangedFile}/>
handleChangedFile={handleChangedFile} />
);
}
});

11
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
View File

@ -13,7 +13,12 @@ import { getLangText } from '../../../utils/lang_utils';
// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
let FileDragAndDrop = React.createClass({
propTypes: {
className: React.PropTypes.string,
areAssetsDownloadable: React.PropTypes.bool,
areAssetsEditable: React.PropTypes.bool,
multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool,
filesToUpload: React.PropTypes.array,
onDrop: React.PropTypes.func.isRequired,
onDragOver: React.PropTypes.func,
onInactive: React.PropTypes.func,
@ -22,10 +27,6 @@ let FileDragAndDrop = React.createClass({
handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func,
handleResumeFile: React.PropTypes.func,
multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool,
areAssetsDownloadable: React.PropTypes.bool,
areAssetsEditable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool,
uploadMethod: React.PropTypes.string,

106
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -33,6 +33,47 @@ const { shape,
const ReactS3FineUploader = React.createClass({
propTypes: {
areAssetsDownloadable: bool,
areAssetsEditable: bool,
handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
onInactive: func, // for when the user does something while the uploader's inactive
// Handle form validation
setIsUploadReady: func, //TODO: rename to setIsUploaderValidated
isReadyForFormSubmission: func,
// We encountered some cases where people had difficulties to upload their
// works to ascribe due to a slow internet connection.
// One solution we found in the process of tackling this problem was to hash
// the file in the browser using md5 and then uploading the resulting text document instead
// of the actual file.
//
// This boolean and string essentially enable that behavior.
// Right now, we determine which upload method to use by appending a query parameter,
// which should be passed into 'uploadMethod':
// 'hash': upload using the hash
// 'upload': upload full file (default if not specified)
enableLocalHashing: bool,
uploadMethod: oneOf(['hash', 'upload']),
// A class of a file the user has to upload
// Needs to be defined both in singular as well as in plural
fileClassToUpload: shape({
singular: string,
plural: string
}),
// Uploading functionality of react fineuploader is disconnected from its UI
// layer, which means that literally every (properly adjusted) react element
// can handle the UI handling.
fileInputElement: oneOfType([
func,
element
]),
// S3 helpers
keyRoutine: shape({
url: string,
fileClass: string,
@ -48,10 +89,11 @@ const ReactS3FineUploader = React.createClass({
number
])
}),
handleChangedFile: func, // is for when a file is dropped or selected
submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
// FineUploader options
autoUpload: bool,
debug: bool,
multiple: bool,
objectProperties: shape({
acl: string
}),
@ -103,45 +145,9 @@ const ReactS3FineUploader = React.createClass({
unsupportedBrowser: string
}),
formatFileName: func,
multiple: bool,
retry: shape({
enableAuto: bool
}),
setIsUploadReady: func,
isReadyForFormSubmission: func,
areAssetsDownloadable: bool,
areAssetsEditable: bool,
defaultErrorMessage: string,
onInactive: func,
// We encountered some cases where people had difficulties to upload their
// works to ascribe due to a slow internet connection.
// One solution we found in the process of tackling this problem was to hash
// the file in the browser using md5 and then uploading the resulting text document instead
// of the actual file.
//
// This boolean and string essentially enable that behavior.
// Right now, we determine which upload method to use by appending a query parameter,
// which should be passed into 'uploadMethod':
// 'hash': upload using the hash
// 'upload': upload full file (default if not specified)
enableLocalHashing: bool,
uploadMethod: oneOf(['hash', 'upload']),
// A class of a file the user has to upload
// Needs to be defined both in singular as well as in plural
fileClassToUpload: shape({
singular: string,
plural: string
}),
// Uploading functionality of react fineuploader is disconnected from its UI
// layer, which means that literally every (properly adjusted) react element
// can handle the UI handling.
fileInputElement: oneOfType([
func,
element
])
})
},
getDefaultProps() {
@ -945,14 +951,18 @@ const ReactS3FineUploader = React.createClass({
render() {
const {
multiple,
areAssetsDownloadable,
areAssetsEditable,
onInactive,
enableLocalHashing,
fileClassToUpload,
fileInputElement: FileInputElement,
uploadMethod } = this.props;
multiple,
areAssetsDownloadable,
areAssetsEditable,
onInactive,
enableLocalHashing,
fileClassToUpload,
fileInputElement: FileInputElement,
showErrorPrompt,
uploadMethod } = this.props;
// Only show the error state once all files are finished
const showError = !uploadInProgress && showErrorPrompt && errorClass;
const props = {
multiple,
@ -962,8 +972,8 @@ const ReactS3FineUploader = React.createClass({
enableLocalHashing,
uploadMethod,
fileClassToUpload,
filesToUpload,
onDrop: this.handleUploadFile,
filesToUpload: this.state.filesToUpload,
handleDeleteFile: this.handleDeleteFile,
handleCancelFile: this.handleCancelFile,
handlePauseFile: this.handlePauseFile,