Validating file extension in AngularJs before uploading

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.

Sanjeev Singh · Accepted Answer · 2015-04-22T05:41:39.770

27

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)

edited Apr 22 '15 at 05:41

answered Apr 21 '15 at 17:29

Sanjeev Singh

3,976
3
33
38

extensions can be easily manipulated. Eg: create an image (say png) then change the extension to .xlsx. the image gets uploaded to server as `.xlsx` For the question, the answer is right, but not practically useful – Adarsh Mohan May 13 '19 at 06:35
I did not understand your question? What kind of practical use you want from a file name and extenssion? – Sanjeev Singh May 13 '19 at 10:07

score 12 · Answer 2 · edited Apr 21 '15 at 17:56

12

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;
                });
           };
        }
    };
});

edited Apr 21 '15 at 17:56

taxicala

21,408
7
37
66

answered Apr 21 '15 at 17:30

ecarrizo

2,758
17
29

what is the use of `+ 1` – runningmark May 18 '16 at 17:01
@runningmark It get the last match with a dot. And sum 1 to that value in order to remove the dot of the output. In the example above, if your file is named after 'someFile.someweirdname.rar" you will get "rar" as `ext` value – ecarrizo May 23 '16 at 13:52
1

When I use this directive, validFile: true is always inside $pending... @ecarrizo – Marko Mikulić Jan 04 '17 at 13:20

Aniket Muruskar · Answer 3 · 2016-03-17T13:31:21.107

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

It is working fine for validating that if a file is jpg, jpeg or png. But when nothing is selected I get a parse error as below: Please add error message for parse. For more details look this image: http://i66.tinypic.com/2ykz6t1.jpg — Vishal, Jun 13 '17 at 12:53
Extension validation is working for me with same code, but required is not working, though its showing parse error. Can anyone Provide any changes required in this to acquire same. — Shilpi Jaiswal, Dec 11 '18 at 10:00

score 1 · Answer 4 · answered Sep 22 '16 at 17:00

Here is the complete code for validating file extension usign AngularJs

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script type='text/javascript'>
            var myApp = angular.module('myApp', []);
            myApp.controller('MyCtrl', function($scope) {
                $scope.setFile = function(element) {
                    $scope.$apply(function($scope) {
                        $scope.theFile = element.files[0];
                        $scope.FileMessage = '';
                        var filename = $scope.theFile.name;
                        console.log(filename.length)
                        var index = filename.lastIndexOf(".");
                        var strsubstring = filename.substring(index, filename.length);
                        if (strsubstring == '.pdf' || strsubstring == '.doc' || strsubstring == '.xls' || strsubstring == '.png' || strsubstring == '.jpeg' || strsubstring == '.png' || strsubstring == '.gif')
                        {
                          console.log('File Uploaded sucessfully');
                        }
                        else {
                            $scope.theFile = '';
                              $scope.FileMessage = 'please upload correct File Name, File extension should be .pdf, .doc or .xls';
                        }

                    });
                };
            });
    </script>

</head>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input type="file"
               onchange="angular.element(this).scope().setFile(this)">
        {{theFile.name}}
        {{FileMessage}}
    </div>

</body>
</html>

score 0 · Answer 5 · answered Apr 21 '15 at 17:20

0

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.

answered Apr 21 '15 at 17:20

Matias Fernandez Martinez

1,877
13
15

Please remember to mark the answer you finded useful – Matias Fernandez Martinez Apr 22 '15 at 13:25

score 0 · Answer 6 · edited May 23 '17 at 10:31

0

File Upload using AngularJS

There are many modules that can help you with this. Any one of these should allow you to define a filter to only upload certain file extensions.

If you're looking for a simpler solution, you can use something like string.js to ensure the filenames of the files being uploaded are of extension '.png'.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 21 '15 at 17:22

jcc

1,137
1
12
31

Validating file extension in AngularJs before uploading

6 Answers6