Below is my code to show a text box and a button next to it for uploading a file using ng-file-upload
. I am trying to show the respective validation error messages like mandatory field,file size limit and acceptable file types. I am able to successfully show the error messages for required field and file size but not for acceptable file types which means
<div ng-message="accept">File format must be {{ vm.fileaccept }}</div>
is not working. I am setting vm.fileaccept
in the controller as vm.fileaccept = '.pdf,image/*';
<form name="uploadForm" ng-submit="vm.submitFile()" novalidate>
<div layout="row" flex="100">
<div layout="column" flex="95">
<md-input-container>
<input type="text" readonly name="filename"
class="form-control" ng-model="vm.filename" required/>
<div class="errors"
ng-show="uploadForm.$submitted || uploadForm.filename.$dirty"
ng-messages="uploadForm.filename.$error">
<div ng-message="required">Required</div>
</div>
<div class="errors"
ng-show="uploadForm.file.$error"
ng-messages="uploadForm.file.$error">
<div ng-message="maxSize">File size cannot exceed 1MB</div>
<div ng-message="accept">File format must be {{ vm.fileaccept }}</div>
</div>
</md-input-container>
</div>
<div layout="column" flex="5">
<md-input-container>
<button
ngf-select="vm.selectFile($file, $invalidFiles)" ng-model="file"
name="file" ngf-accept="vm.fileaccept" ngf-pattern="vm.fileaccept"
ngf-min-height="100" ngf-max-size="1MB">
<i class="fa fa-folder-open-o"></i></button>
</md-input-container>
</div>
</div>
</form>
I don't know the reason exactly , the below change worked.
<div ng-message="accept">File format must be {{ vm.fileaccept }}</div>
to
<div ng-message="pattern">File format must be {{ vm.fileaccept }}</div>