Search code examples
angularjsangular-materialng-file-uploadng-messages

ng-file-upload file type/size validations with multiple ng-messages


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>

Solution

  • 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>