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 create a angular directive, something like this should work (Change the accepted values in the validFormats array);

HTML:

```
    <form name='fileForm' >
        <input type="file" name="file" ng-model="fileForm.file" validfile>
    </form>

```

Javascript:

```
angular.module('appname').directive('validfile', function validFile() {

    var validFormats = ['jpg', 'gif'];
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$validators.validFile = function() {
                elem.on('change', function () {
                   var value = elem.val(),
                       ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();   

                   return validFormats.indexOf(ext) !== -1;
                });
           };
        }
    };
});

```
You can add a custom directive which checks for the `element.files` array in order to check the type on the `onchange` event.
There is no embedded validation for file input.