How To Validate Files With Required In Angularjs?

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

Solution 1:

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>