Shuffle uploader props to be more readable

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 (
             <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: {

js/components/ascribe_forms/input_fineuploader.js

@@ -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 (

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,

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() {
@@ -952,8 +958,12 @@ const ReactS3FineUploader = React.createClass({
             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,
             areAssetsDownloadable,
@@ -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,