Question: I am uploading images for our application to the server. 
Is there any way to validate the extensions in client side by JS before submitting them to the server before uploading them to server?

I am using AngularJs to handle my front-end.

Answer: 
You can use this simple javascript to validate. This code should be put inside a directive and on change of file upload control.

```
var extn = filename.split(".").pop();

```

Alternatively you can use javascript substring method also:

```
fileName.substr(fileName.lastIndexOf('.')+1)

```
for file validation i.e **required**,**file extension**,**size**.Create custom directive and used angular js ng-message module for simplify the validation errors

**HTML**

```
<input type="file" ng-model="imageFile" name="imageFile" valid-file required>

<div ng-messages="{FORMNAME}.imageFile.$error" ng-if="{FORMNAME}.imageFile.$touched">
     <p ng-message="required">This field is required</p>
     <p ng-message="extension">Invalid Image</p>
 </div>

```

**Angular JS**

```
customApp.directive('validFile', function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModel) {
        var validFormats = ['jpg','jpeg','png'];
        elem.bind('change', function () {
            validImage(false);
            scope.$apply(function () {
                ngModel.$render();
            });
        });
        ngModel.$render = function () {
            ngModel.$setViewValue(elem.val());
        };
        function validImage(bool) {
            ngModel.$setValidity('extension', bool);
        }
        ngModel.$parsers.push(function(value) {
            var ext = value.substr(value.lastIndexOf('.')+1);
            if(ext=='') return;
            if(validFormats.indexOf(ext) == -1){
                return value;
            }
            validImage(true);
            return value;
        });
    }
  };
});

```

**Require**
[angular-messages.min.js](https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.1/angular-messages.min.js)