Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Show error for file size #653

Merged
merged 1 commit into from
Jan 12, 2016
Merged

Show error for file size #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 29 additions & 14 deletions app/directives/tc-file-input/tc-file-input.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '@',
Expand All @@ -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(',');

Expand All @@ -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);
}
});
});
Expand Down
28 changes: 22 additions & 6 deletions app/submissions/submit-file/submit-file.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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 #",
Expand Down