Move fine uploader validation constants into their own file

js/components/ascribe_detail/further_details_fileuploader.js

@@ -8,6 +8,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -15,23 +16,26 @@ import { getLangText } from '../../utils/lang_utils';
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        pieceId: React.PropTypes.number.isRequired,
+
+        areAssetsDownloadable: React.PropTypes.bool,
+        editable: React.PropTypes.bool,
+        isReadyForFormSubmission: React.PropTypes.func,
         label: React.PropTypes.string,
-        pieceId: React.PropTypes.number,
+        multiple: React.PropTypes.bool,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
+        onValidationFailed: React.PropTypes.func,
         setIsUploadReady: React.PropTypes.func,
         submitFile: React.PropTypes.func,
-        onValidationFailed: React.PropTypes.func,
+        validation: ReactS3FineUploader.propTypes.validation
-        isReadyForFormSubmission: React.PropTypes.func,
-        editable: React.PropTypes.bool,
-        multiple: React.PropTypes.bool,
-        areAssetsDownloadable: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
             areAssetsDownloadable: true,
             label: getLangText('Additional files'),
-            multiple: false
+            multiple: false,
+            validation: validationTypes.additionalData
         };
     },
 
@@ -61,7 +65,7 @@ let FurtherDetailsFileuploader = React.createClass({
                         url: ApiUrls.blob_otherdatas,
                         pieceId: this.props.pieceId
                     }}
-                    validation={AppConstants.fineUploader.validation.additionalData}
+                    validation={this.props.validation}
                     submitFile={this.props.submitFile}
                     onValidationFailed={this.props.onValidationFailed}
                     setIsUploadReady={this.props.setIsUploadReady}

js/components/ascribe_forms/form_create_contract.js

@@ -2,19 +2,20 @@
 
 import React from 'react';
 
-import Form from '../ascribe_forms/form';
+import ContractListActions from '../../actions/contract_list_actions';
-import Property from '../ascribe_forms/property';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import ContractListActions from '../../actions/contract_list_actions';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import InputFineUploader from './input_fineuploader';
 
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
@@ -78,8 +79,8 @@ let CreateContractForm = React.createClass({
                             url: ApiUrls.blob_contracts
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit,
+                            itemLimit: validationTypes.additionalData.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            sizeLimit: validationTypes.additionalData.sizeLimit,
                             allowedExtensions: ['pdf']
                         }}
                         areAssetsDownloadable={true}

js/components/ascribe_forms/form_register_piece.js

@@ -8,12 +8,16 @@ import UserActions from '../../actions/user_actions';
 import Form from './form';
 import Property from './property';
 import InputFineUploader from './input_fineuploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import FormSubmitButton from '../ascribe_buttons/form_submit_button';
 
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import AscribeSpinner from '../ascribe_spinner';
+
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
-import AscribeSpinner from '../ascribe_spinner';
+import { validationParts, validationTypes } from '../../constants/uploader_constants';
 
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
@@ -180,7 +184,7 @@ let RegisterPieceForm = React.createClass({
                         createBlobRoutine={{
                             url: ApiUrls.blob_digitalworks
                         }}
-                        validation={AppConstants.fineUploader.validation.registerWork}
+                        validation={validationTypes.registerWork}
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
@@ -206,9 +210,9 @@ let RegisterPieceForm = React.createClass({
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
+                            itemLimit: validationTypes.workThumbnail.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
+                            sizeLimit: validationTypes.workThumbnail.sizeLimit,
-                            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                            allowedExtensions: validationParts.allowedExtensions.images
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
                         fileClassToUpload={{

js/components/ascribe_forms/input_fineuploader.js

@@ -28,11 +28,7 @@ const InputFineUploader = React.createClass({
         createBlobRoutine: shape({
             url: string
         }),
-        validation: shape({
+        validation: ReactS3FineUploader.propTypes.validation,
-            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

js/components/ascribe_settings/contract_settings_update_button.js

@@ -2,17 +2,18 @@
 
 import React from 'react';
 
-import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import ContractListActions from '../../actions/contract_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -68,8 +69,8 @@ let ContractSettingsUpdateButton = React.createClass({
                    url: ApiUrls.blob_contracts
                }}
                validation={{
-                   itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                   itemLimit: validationTypes.registerWork.itemLimit,
-                   sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                   sizeLimit: validationTypes.additionalData.sizeLimit,
                    allowedExtensions: ['pdf']
                }}
                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -91,7 +91,7 @@ const ReactS3FineUploader = React.createClass({
         }),
         validation: shape({
             itemLimit: number,
-            sizeLimit: string,
+            sizeLimit: number,
             allowedExtensions: arrayOf(string)
         }),
         messages: shape({

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -3,19 +3,21 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import Form from '../../../../../ascribe_forms/form';
 import Property from '../../../../../ascribe_forms/property';
 import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
 
-import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
 import InputFineuploader from '../../../../../ascribe_forms/input_fineuploader';
+import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import AscribeSpinner from '../../../../../ascribe_spinner';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
-
-import AppConstants from '../../../../../../constants/application_constants';
 import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+import { validationParts, validationTypes } from '../../../../../../constants/uploader_constants';
 
 import requests from '../../../../../../utils/requests';
 
@@ -193,7 +195,7 @@ const PRRegisterPieceForm = React.createClass({
 
     render() {
         const { location } = this.props;
-        const maxThumbnailSize = AppConstants.fineUploader.validation.workThumbnail.sizeLimit / 1000000;
+        const maxThumbnailSize = validationTypes.workThumbnail.sizeLimit / 1000000;
 
         return (
             <div className="register-piece--form">
@@ -305,8 +307,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'digitalwork'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                                itemLimit: validationTypes.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                sizeLimit: validationTypes.additionalData.sizeLimit,
                                 allowedExtensions: ['pdf']
                             }}
                             location={location}
@@ -318,7 +320,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={`${getLangText('Featured Cover photo')} max ${maxThumbnailSize}MB`}>
+                        label={`${getLangText('Featured Cover photo')} (max ${maxThumbnailSize}MB)`}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{
@@ -331,9 +333,9 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'thumbnail'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
+                                itemLimit: validationTypes.workThumbnail.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
+                                sizeLimit: validationTypes.workThumbnail.sizeLimit,
-                                allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                                allowedExtensions: validationParts.allowedExtensions.images
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -356,8 +358,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'otherdata'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                                itemLimit: validationParts.itemLimit.single,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
+                                sizeLimit: validationTypes.additionalData.sizeLimit
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -378,9 +380,9 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'otherdata'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                                itemLimit: validationParts.itemLimit.single,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                sizeLimit: validationTypes.additionalData.sizeLimit,
-                                allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                                allowedExtensions: validationParts.allowedExtensions.images
                             }}
                             location={location}
                             fileClassToUpload={{

js/constants/application_constants.js

@@ -68,23 +68,6 @@ const constants = {
     // Source: http://www.w3schools.com/tags/att_input_type.asp
     'possibleInputTypes': ['button', 'checkbox', 'color', 'date', 'datetime', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'],
 
-    'fineUploader': {
-        'validation': {
-            'additionalData': {
-                'itemLimit': 100,
-                'sizeLimit': '25000000000'
-            },
-            'registerWork': {
-                'itemLimit': 1,
-                'sizeLimit': '25000000000'
-            },
-            'workThumbnail': {
-                'itemLimit': 1,
-                'sizeLimit': '5000000'
-            }
-        }
-    },
-
     'copyrightAssociations': ['ARS', 'DACS', 'Bildkunst', 'Pictoright', 'SODRAC', 'Copyright Agency/Viscopy', 'SAVA',
         'Bildrecht GmbH', 'SABAM', 'AUTVIS', 'CREAIMAGEN', 'SONECA', 'Copydan', 'EAU', 'Kuvasto', 'GCA', 'HUNGART',
         'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',

js/constants/uploader_constants.js

@@ -0,0 +1,32 @@
+'use strict';
+
+export const validationParts = {
+    allowedExtensions: {
+        images: ['png', 'jpg', 'jpeg', 'gif']
+    },
+    itemLimit: {
+        single: 1,
+        multiple: 100
+    },
+    sizeLimit: {
+        default: 25000000000,
+        thumbnail: 5000000
+    }
+};
+
+const { allowedExtensions, itemLimit, sizeLimit } = validationParts;
+
+export const validationTypes = {
+    additionalData: {
+        itemLimit: itemLimit.multiple,
+        sizeLimit: sizeLimit.default
+    },
+    registerWork: {
+        itemLimit: itemLimit.single,
+        sizeLimit: sizeLimit.default
+    },
+    workThumbnail: {
+        itemLimit: itemLimit.single,
+        sizeLimit: sizeLimit.thumbnail
+    }
+};