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, Oct 27 '15 at 05:15
You may want to also look at: http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file — MiltoxBeyond, Oct 27 '15 at 05:33
"name" is a reference variable (extensions) used to compare with "File extension" — Prabhu S, Oct 27 '15 at 08:25

Khalid Hussain · Answer 1 · 2015-10-27T08:25:43.147

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 '15 at 08:25

answered Oct 27 '15 at 06:29

Khalid Hussain

1,675
17
25

Test with a `.png` image to see the output. – Khalid Hussain Oct 27 '15 at 08:22
I have updated my answer and fiddle, please check it again. – Khalid Hussain Oct 27 '15 at 08:28
If any answer solve your problem, you should mark that answer as accepted. [For detail, visit this link](http://stackoverflow.com/help/someone-answers) – Khalid Hussain Oct 27 '15 at 10:00

score 2 · Answer 2 · answered Oct 27 '15 at 08:55

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 '15 at 08:55

guest271314

1
15
104
177

How to validate image File using Angular-js

2 Answers2