Merge pull request #653 from appirio-tech/SUP-2947-file-size

Show error for file size

Author: nlitwin

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);
             }
           });
         });

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 #",