How to validate files with required in angularjs?

Question

Hi I am developing angularjs application. I have file upload module. Below is my html code.

<input type="file"  file-modelsr="myFileID" name="fileupld" valid-files required />

On submitting form I am trying to get something like this below.

console.log(form2.fileupld.$valid);

This always gives me undefined. How can i check file has been uploaded or not on submitting the form?

I have used below directive.

myapp.directive('validFiles', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {
            //change event is fired when file is selected
            el.bind('change', function () {
                debugger;
                scope.$apply(function () {
                    ngModel.$setViewValue(el.val());
                    ngModel.$render();
                })
            })
        }
    }
})

I used below directive to upload files.

myapp.directive('fileModelsr', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModelsr);
            var modelSetter = model.assign;
            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

How can I apply required file validation in AngularJS?

You cannot use angular form validations on file upload. You have to write custom validations by yourself. — Vivz
– Vivz, Commented Aug 11, 2017 at 6:09
Thank you. i have written valid-files directive. How can i make use of this directive? — Niranjan Godbole
– Niranjan Godbole, Commented Aug 11, 2017 at 6:10
You have to check if your file-modelsr contains a value or not in your directive to validate it. — Vivz
– Vivz, Commented Aug 11, 2017 at 6:14
How can i check if file-modelsr contains some value? console.log($scope.myFileID); gives me undefined. — Niranjan Godbole
– Niranjan Godbole, Commented Aug 11, 2017 at 6:15
var model = $parse(attrs.file-modelsr ); inside your link and debug the code and see how to add and what kind of validations you want — Vivz
– Vivz, Commented Aug 11, 2017 at 6:17

Vivz · Accepted Answer · 2017-08-11 06:45:41Z

You can change your fileModel directive to the following and get rid of validFiles directive. Check if your fileModelsr has any value or not and validate based on this.

JS:

.directive('fileModel', ['$parse', '$rootScope', function($parse, $rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModelsr);
            var modelSetter = model.assign;
            element.bind('change', function() {
                scope.$apply(function() {
                    modelSetter(scope, element[0].files[0]);
                    if (element[0].files[0]) {
                        $rootScope.fileUploaded = true;
                    }
                });
            });
        }
    };
}])

HTML:

<input type="file" file-modelsr="myFileID" name="fileupld" required />
<button type="submit" name="submit" class="btn btn-primary" ng-disabled="!fileUploaded" ng-click="uploadFile()">Submit</button>

Collectives™ on Stack Overflow

How to validate files with required in angularjs?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related