From 81eff5197e5577107c2163341e9c0abdb41ab080 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Tue, 12 Jan 2016 10:57:46 -0800 Subject: [PATCH] Show error for file size --- .../tc-file-input/tc-file-input.directive.js | 43 +++++++++++++------ app/submissions/submit-file/submit-file.jade | 28 +++++++++--- 2 files changed, 51 insertions(+), 20 deletions(-) diff --git a/app/directives/tc-file-input/tc-file-input.directive.js b/app/directives/tc-file-input/tc-file-input.directive.js index 278c9ad1a..a7cb39c21 100644 --- a/app/directives/tc-file-input/tc-file-input.directive.js +++ b/app/directives/tc-file-input/tc-file-input.directive.js @@ -6,7 +6,7 @@ function tcFileInput() { return { restrict: 'E', - require: ['^form', '^ngModel'], + require: '^form', templateUrl: 'directives/tc-file-input/tc-file-input.html', scope: { labelText: '@', @@ -19,10 +19,7 @@ setFileReference: '&', ngModel: '=' }, - link: function(scope, element, attrs, controllers) { - var formController = controllers[0]; - var ngModel = controllers[1]; - + link: function(scope, element, attrs, formController) { scope.selectFile = selectFile; var fileTypes = scope.fileType.split(','); @@ -34,26 +31,44 @@ fileInput.bind('change', function() { var file = fileInput[0].files[0]; + // About 1 in 20 times, the file is undefined (must be race condition) + // Return early in this case so no errors are thrown + if (!file) { + return; + } + + var fileSize = file.size; + var isAllowedFileSize = fileSize < '500000000'; + var selectedFileType = file.type.slice(file.type.lastIndexOf('/') + 1); var isAllowedFileFormat = _.some(fileTypes, _.matches(selectedFileType)); scope.$apply(function(){ + // Set the file name as the value of the disabled input + fileNameInput[0].value = file.name; + var clickedFileInput = formController[attrs.fieldId]; + if (!isAllowedFileFormat) { - fileNameInput[0].value = file.name; + // Manually setting is required since Angular doesn't support file inputs + clickedFileInput.$setTouched(); + clickedFileInput.$setValidity('required', false); + + } else { + clickedFileInput.$setValidity('required', true); + } + if (!isAllowedFileSize) { // Manually setting is required since Angular doesn't support file inputs - formController[attrs.fieldId].$setTouched(); - formController[attrs.fieldId].$setValidity('required', false); + clickedFileInput.$setTouched(); + clickedFileInput.$setValidity('filesize', false); } else { + clickedFileInput.$setValidity('filesize', true); + } + + if (isAllowedFileFormat && isAllowedFileSize) { // Pass file object up through callback into controller scope.setFileReference({file: file, fieldId: scope.fieldId}); - - // Set the file name as the value of the disabled input - fileNameInput[0].value = file.name; - - // Manually set validity of specific input field - formController[attrs.fieldId].$setValidity('required', true); } }); }); diff --git a/app/submissions/submit-file/submit-file.jade b/app/submissions/submit-file/submit-file.jade index e6921003d..0dc8534f4 100644 --- a/app/submissions/submit-file/submit-file.jade +++ b/app/submissions/submit-file/submit-file.jade @@ -37,8 +37,14 @@ ng-model="vm.submissionForm.submissionZip" ) - .tc-error-messages(ng-show="submissionForm['SUBMISSION_ZIP'].$touched && submissionForm['SUBMISSION_ZIP'].$invalid") - p(ng-show="submissionForm['SUBMISSION_ZIP'].$error.required") This is not the correct file format. Please select a .zip file. + .tc-error-messages( + ng-show="submissionForm['SUBMISSION_ZIP'].$touched && submissionForm['SUBMISSION_ZIP'].$invalid", + ng-messages="submissionForm['SUBMISSION_ZIP'].$error" + ) + p(ng-message="filesize") File size may not exceed 500MB. + + p(ng-message="required") This is not the correct file format. Please select a .zip file. + tc-file-input.tc-file-field( label-text="Source", @@ -52,8 +58,13 @@ ng-model="vm.submissionForm.sourceZip" ) - .tc-error-messages(ng-show="submissionForm['SOURCE_ZIP'].$touched && submissionForm['SOURCE_ZIP'].$invalid") - p(ng-show="submissionForm['SOURCE_ZIP'].$error.required") This is not the correct file format. Please select a .zip file. + .tc-error-messages( + ng-show="submissionForm['SOURCE_ZIP'].$touched && submissionForm['SOURCE_ZIP'].$invalid", + ng-messages="submissionForm['SOURCE_ZIP'].$error" + ) + p(ng-message="filesize") File size may not exceed 500MB. + + p(ng-message="required") This is not the correct file format. Please select a .zip file. tc-file-input.tc-file-field( label-text="Preview Image", @@ -66,8 +77,13 @@ ng-model="vm.submissionForm.designCover" ) - .tc-error-messages(ng-show="submissionForm['DESIGN_COVER'].$touched && submissionForm['DESIGN_COVER'].$invalid") - p(ng-show="submissionForm['DESIGN_COVER'].$error.required") This is not the correct file format. Please select a .jpg or .png file. + .tc-error-messages( + ng-show="submissionForm['DESIGN_COVER'].$touched && submissionForm['DESIGN_COVER'].$invalid", + ng-messages="submissionForm['DESIGN_COVER'].$error" + ) + p(ng-message="filesize") File size may not exceed 500MB. + + p(ng-message="required") This is not the correct file format. Please select a .jpg or .png file. tc-input.fieldset__input.submitterRank( label-text="Rank #",