In this article I will explain with an example, how to validate File in INPUT Type File (FileUpload) in AngularJS.
 
 

HTML Markup

The HTML Markup consists of:
DIV – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
FileUpload – For selecting file.
Button – For validating selected file.
The HTML INPUT Button has been assigned with the following AngularJS directive.
ng-click – Called when user clicks the Button.
Note: For more details on ng-click directive, please refer my article ng-click example in AngularJS.
 
SPAN – For displaying error message.
The HTML SPAN has been assigned with the following AngularJS directive.
ng-show – For showing the element.
Note: For more details on ng-show directive, please refer my article Simple AngularJS ng-show and ng-hide Tutorial with example.
 
ng-bind – For binding the model value to the HTML element.
Note: For more details on ng-bind directive, please refer my article Simple AngularJS ng-bind and Template Tutorial with example.
 
<div ng-app="MyApp" ng-controller="MyController">
    Select File:
    <input id="fuUpload" type="file" />
    <input type="button" value="Validate" ng-click="ValidateFile()" />
    <br />
    <span class="error" ng-show="Show" ng-bind="Message"></span>
</div>
 
 

Validating selected File using AngularJS

Inside the HTML Markup, the following AngularJS script file is inherited:
1. angular.min.js
When the Upload button is clicked, the ValidateFile function is called.
Inside the ValidateFile function, the file extension of the selected file is determined and an Array of valid file type is defined.
Then, the file extension is verified whether exists or not in the Array using the Array.includes function and returned value is set in isValidFile variable.
The following Array can be easily set with valid file extensions as per your requirement.
var validFilesTypes = ["jpeg", "jpg", "png", "gif"];
 
Finally, if isValidFile variable is FALSE then, the error message is set in the SPAN element and displayed in the page.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.ValidateFile = function () {
            $scope.Show = false;
            var fileName = document.getElementById("fuUpload").files[0].name;
            var extension = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
            var validFilesTypes = ["jpeg", "jpg", "png", "gif"];
            var isValidFile = validFilesTypes.includes(extension);
            if (!isValidFile) {
                $scope.Message = "Invalid File. Please upload file with extension: " + validFilesTypes.join(", ") + ".";
                $scope.Show = !isValidFile;
            }
        };
    });
</script>
 
 

Screenshot

Validate File in INPUT Type File (FileUpload) in AngularJS
 
 

Demo

View Demo
 
 

Downloads

Download Code