From a0db6d3037547750914bd518d5301baad6fb80a8 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 8 Dec 2015 18:09:24 +0100 Subject: [PATCH] Shuffle uploader props to be more readable --- .../further_details_fileuploader.js | 43 ++++--- .../ascribe_forms/input_fineuploader.js | 79 +++++++------ .../file_drag_and_drop.js | 11 +- .../react_s3_fine_uploader.js | 106 ++++++++++-------- 4 files changed, 140 insertions(+), 99 deletions(-) diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js index 5c9a70d0..b660c80e 100644 --- a/js/components/ascribe_detail/further_details_fileuploader.js +++ b/js/components/ascribe_detail/further_details_fileuploader.js @@ -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 ( + handleChangedFile={handleChangedFile} /> ); } }); diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js index 1efe301c..cf3ac775 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js @@ -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, diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 562f9449..f75555a3 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -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,