How to validate image File using Angular-js

Question

am using angular-js for image file validation. i want to find out "is it image File or not"..here am compare the extension of file to identify the file is correct or not..

but my code is not work!..it doesn't show any error. am literally confused

anyone have the answers command here!..

Thanks in advance!

my Code is

<HTML>
 <HEAD>
  <TITLE>Validate image on upload</TITLE>
  <script src = "angular.min.js"></script>
  <body>
<center>
<div ng-app="prabhu"  ng-controller="mycontroller">


    Upload an image: <INPUT type="file" name="image_file" ng-model="fil.name">  
    //<h1>the file is {{val.validate())}}</h1>
 <p ng-bind="val.validate()"> <p>
 </div>
</center>
<script >

 var myapp = angular.module("prabhu",[]);
 myapp.controller("mycontroller",function($scope){

    $scope.val={            
        ref = ['jpg','jpeg','png'],         
        validate:function(){

            name = fil.name | lowercase;
            length = name.length();
            ext = name.LastIndexOf(".")+1;          
            ext1 = name.substring(ext,length);          
            //k = 0;            
            for (k=0 ; k <= 4;k++){
                if(ref[k]==ext1){
                    return "valid File Format";

                }
                //else
                //  return "invalid File Format";
            }           
            return "invalid File Format";
        }
    }; 
 });
 </script>
</BODY>

</HTML>

just in case did you perhaps forget the n in the directive ng-model="fil.name"? Also just to be safe, you should declare $scope.fil = {"name":null} — MiltoxBeyond
– MiltoxBeyond, Commented Oct 27, 2015 at 5:15
You may want to also look at: stackoverflow.com/questions/17063000/… — MiltoxBeyond
– MiltoxBeyond, Commented Oct 27, 2015 at 5:33

Khalid Hussain · Accepted Answer · 2015-10-27 08:25:43Z

5

Working fiddle.

As far as I know, no binding support for File Upload control.

HTML:

    <input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(this.files)" />

In controller:

$scope.uploadImage = function (files) {           
       var ext = files[0].name.match(/\.(.+)$/)[1];
       if(angular.lowercase(ext) ==='jpg' || angular.lowercase(ext) ==='jpeg' || angular.lowercase(ext) ==='png'){
        alert("Valid File Format");
       }  
       else{
        alert("Invalid File Format");
       }       
    }

edited Oct 27, 2015 at 8:25

answered Oct 27, 2015 at 6:29

Khalid Hussain

1,69417 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Khalid Hussain Over a year ago

Test with a .png image to see the output.

Khalid Hussain Over a year ago

I have updated my answer and fiddle, please check it again.

Khalid Hussain Over a year ago

If any answer solve your problem, you should mark that answer as accepted. For detail, visit this link

guest271314 · Accepted Answer · 2015-10-27 08:55:48Z

2

my requirement is to select image files only!.

Try using accept attribute at input type="file" element

<input type="file" accept="image/*" />

answered Oct 27, 2015 at 8:55

guest271314

1

Collectives™ on Stack Overflow

How to validate image File using Angular-js

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related