Input type="file" show error when i upload a image file

Question

when i try to upload image from a file type input with angular validation its shows error and won't passes

<input type="file" name="displaypic" ng-model="displaypic" ng-pattern="/\.(jpe?g|png|gif|bmp)$/i" ng-required="true" />
<span ng-show="SignupForm.displaypic.$error.pattern">* Must be an Image</span>

with css as input.ng-invalid.ng-touched{border: 2px solid red;}

its does not show the error of $error.pattern but just get the css for invalid file and didn't let form to submit

`input[type=file]` doesn't [play well with `ngModel`](https://github.com/angular/angular.js/issues/1375). — Stanislav Kvitash, Aug 18 '17 at 11:42
You can try using `directive` mentioned in [this answer](https://stackoverflow.com/a/44517492/4222181) or some others in [this question](https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file). — Stanislav Kvitash, Aug 18 '17 at 11:47

score 0 · Accepted Answer · answered Aug 18 '17 at 13:27

You have to use directive for this Create an object in controller

$scope.file={};
$scope.file.fileDetail={};

<input type="file" fileUpload filetoread="file.fileDetail" />

.directive("fileUpload ", [function () {
return {
    scope: {
        filetoread: "="
    },
    link: function (scope, element, attributes) {
        element.bind("change", function (changeEvent) {
            var reader = new FileReader();
            reader.onload = function (loadEvent) {
                scope.$apply(function () {
                    scope.filetoread= loadEvent.target.result;
                });
            }
            reader.readAsDataURL(changeEvent.target.files[0]);
        });
    }
}
 }]);

Input type="file" show error when i upload a image file

1 Answers1