Merge pull request #86 from ascribe/AD-1530-limit-thumbnail-upload-size

Limit thumbnail size to 5mb

js/components/ascribe_detail/further_details_fileuploader.js

@@ -20,6 +20,7 @@ let FurtherDetailsFileuploader = React.createClass({
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
         setIsUploadReady: React.PropTypes.func,
         submitFile: React.PropTypes.func,
+        onValidationFailed: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
         editable: React.PropTypes.bool,
         multiple: React.PropTypes.bool
@@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({
                     }}
                     validation={AppConstants.fineUploader.validation.additionalData}
                     submitFile={this.props.submitFile}
+                    onValidationFailed={this.props.onValidationFailed}
                     setIsUploadReady={this.props.setIsUploadReady}
                     isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                     session={{

js/components/ascribe_forms/form_register_piece.js

@@ -109,6 +109,11 @@ let RegisterPieceForm = React.createClass({
         );
     },
 
+    handleThumbnailValidationFailed(thumbnailFile) {
+        // If the validation fails, set the thumbnail as submittable since its optional
+        this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
+    },
+
     isThumbnailDialogExpanded() {
         const { enableSeparateThumbnail } = this.props;
         const { digitalWorkFile } = this.state;
@@ -194,14 +199,15 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
+                        onValidationFailed={this.handleThumbnailValidationFailed}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
                             allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}

js/components/ascribe_forms/input_fineuploader.js

@@ -52,6 +52,7 @@ const InputFineUploader = React.createClass({
             plural: string
         }),
         handleChangedFile: func,
+        onValidationFailed: func,
 
         // Provided by `Property`
         onChange: React.PropTypes.func
@@ -107,6 +108,7 @@ const InputFineUploader = React.createClass({
             isFineUploaderActive,
             isReadyForFormSubmission,
             keyRoutine,
+            onValidationFailed,
             setIsUploadReady,
             uploadMethod,
             validation,
@@ -127,6 +129,7 @@ const InputFineUploader = React.createClass({
                 createBlobRoutine={createBlobRoutine}
                 validation={validation}
                 submitFile={this.submitFile}
+                onValidationFailed={onValidationFailed}
                 setIsUploadReady={setIsUploadReady}
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -50,6 +50,7 @@ const ReactS3FineUploader = React.createClass({
         }),
         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
+        onValidationFailed: func,
         autoUpload: bool,
         debug: bool,
         objectProperties: shape({
@@ -523,13 +524,16 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isFileValid(file) {
-        if(file.size > this.props.validation.sizeLimit) {
+        if (file.size > this.props.validation.sizeLimit) {
+            const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
 
-            let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
-
-            let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
 
+            if (typeof this.props.onValidationFailed === 'function') {
+                this.props.onValidationFailed(file);
+            }
+
             return false;
         } else {
             return true;

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

@@ -139,7 +139,7 @@ const PRRegisterPieceForm = React.createClass({
     },
 
     /**
-     * This method is overloaded so that we can track the ready-state
+     * These two methods are overloaded so that we can track the ready-state
      * of each uploader in the component
      * @param {string} uploaderKey Name of the uploader's key to track
      */
@@ -151,6 +151,14 @@ const PRRegisterPieceForm = React.createClass({
         };
     },
 
+    handleOptionalFileValidationFailed(uploaderKey) {
+        return () => {
+            this.setState({
+                [uploaderKey]: true
+            });
+        };
+    },
+
     getSubmitButton() {
         const { digitalWorkKeyReady,
                 thumbnailKeyReady,
@@ -303,7 +311,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={getLangText('Featured Cover photo')}>
+                        label={getLangText('Featured Cover photo (max 2MB)')}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{
@@ -316,8 +324,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'thumbnail'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                                itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
                                 allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                             }}
                             location={location}
@@ -334,6 +342,7 @@ const PRRegisterPieceForm = React.createClass({
                             fileInputElement={UploadButton()}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
+                            onValidationFailed={this.handleOptionalFileValidationFailed('supportingMaterialsReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',

js/constants/application_constants.js

@@ -91,6 +91,10 @@ const constants = {
             'registerWork': {
                 'itemLimit': 1,
                 'sizeLimit': '25000000000'
+            },
+            'workThumbnail': {
+                'itemLimit': 1,
+                'sizeLimit': '5000000'
             }
         }
     },