AngularJs How to check for changes in file input fields

Question

I am new to angular  I am trying to read the uploaded file path from HTML  file  field whenever a  change  happens on this field  If i use  onChange  it works but when i use it angular way using  ng-change  it doesn t work    lt script gt     var DemoModule   angular module  Demo          DemoModule  controller  form-cntlr  function  scope       scope selectFile   function                    file   click             scope fileNameChaged   function                alert  select file              lt  script gt    lt div ng-controller  form-cntlr  gt       lt form gt            lt button ng-click  selectFile    gt Upload Your File lt  button gt            lt input type  file  style  display none                             id  file  name  file  ng-Change  fileNameChaged     gt       lt  form gt     lt  div gt    fileNameChaged   is never calling  Firebug also doesn t show any error

User · Answer

Another interesting way to listen file input changes is with a watch over the ng-model attribute of the input file. Off course FileModel is a custom directive.

Like this:

HTML -> <input type="file" file-model="change.fnEvidence">

JS Code ->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

Hope it can helps someone.

User · Answer

I have done it like this    lt  -- HTML -- gt   lt button id  uploadFileButton  class  btn btn-info  ng-click  vm upload    gt       lt span  class  fa fa-paperclip  gt  lt  span gt  lt  button gt   lt input type  file  id  txtUploadFile  name  fileInput  style  display  none     gt         self is the instance of  scope or this self upload   function         var ctrl   angular element   txtUploadFile       ctrl on  change   fileNameChanged      ctrl click       function fileNameChanged e        console log self currentItem       alert  select file

User · Answer

The clean way is to write your own directive to bind to  change  event  Just to let you know IE9 does not support FormData so you cannot really get the file object from the change event   You can use ng-file-upload library which already supports IE with FileAPI polyfill and simplify the posting the file to the server  It uses a directive to achieve this     lt script src  angular min js  gt  lt  script gt   lt script src  ng-file-upload js  gt  lt  script gt    lt div ng-controller  MyCtrl  gt     lt input type  file  ngf-select  onFileSelect  files   multiple gt   lt  div gt    JS     inject angular file upload directive  angular module  myApp     ngFileUpload      var MyCtrl       scope    Upload   function  scope  Upload       scope onFileSelect   function  files           files  an array of files selected  each file has name  size  and type      for  var i   0  i  lt   files length  i            var  file    files i         Upload upload           url   my upload url           data   file   file           then function data  status  headers  config               file is uploaded successfully         console log data

User · Answer

I made a small directive to listen for file input changes   View JSFiddle  view html    lt input type  file  custom-on-change  uploadFile  gt    controller js   app controller  myCtrl   function  scope        scope uploadFile   function event           var files   event target files                    directive js   app directive  customOnChange   function       return       restrict   A       link  function  scope  element  attrs          var onChangeHandler   scope  eval attrs customOnChange         element on  change   onChangeHandler         element on   destroy   function             element off

User · Answer

Working Demo of  files-input  Directive that Works with ng-change1  To make an  lt input type file gt  element work the ng-change directive  it needs a custom directive that works with the ng-model directive    lt input type  file  files-input ng-model  fileList          ng-change  onInputChange    multiple   gt    The DEMO   x000D   x000D  angular module  app      x000D   directive  filesInput   function     x000D    return   x000D      require   ngModel   x000D      link  function postLink scope elem attrs ngModel    x000D        elem on  change   function e    x000D          var files   elem 0  files  x000D          ngModel  setViewValue files   x000D           x000D        x000D      x000D     x000D   x000D   controller  ctrl   function  scope    x000D        scope onInputChange   function     x000D           console log  input change    x000D          x000D     x000D   lt script src    unpkg com angular angular js  gt  lt  script gt  x000D     lt body ng-app  app  ng-controller  ctrl  gt  x000D       lt h1 gt AngularJS Input  type file  Demo lt  h1 gt  x000D       x000D       lt input type  file  files-input ng-model  fileList   x000D             ng-change  onInputChange    multiple   gt  x000D       x000D       lt h2 gt Files lt  h2 gt  x000D       lt div ng-repeat  file in fileList  gt  x000D          file name   x000D       lt  div gt  x000D     lt  body gt  x000D   x000D   x000D

User · Answer

I ve expanded on  Stuart Axon s idea to add two-way binding for the file input  i e  allow resetting the input by resetting the model value back to null    app directive  bindFile    function          return           require   ngModel           restrict   A           link  function   scope  el  attrs  ngModel                el bind  change   function  event                    ngModel  setViewValue event target files 0                     scope  apply                                  scope  watch function                      return ngModel  viewValue                 function  value                    if   value                        el val                                                                Demo

User · Answer

This is a refinement of some of the other ones around  the data will end up in an ng-model  which is normally what you want   Markup  just make an attribute data-file so the directive can find it    lt input     data-file     id  id image  name  image      ng-model  my image model  type  file  gt    JS  app directive  file   function         return           require  ngModel           restrict   A           link  function  scope  el  attrs  ngModel               el bind  change   function event                   var files   event target files                  var file   files 0                    ngModel  setViewValue file                    scope  apply

User · Answer

Too complete solution base on    onchange  angular element this  scope   UpLoadFile this files      A simple way to hide the input field and replace it with a image  here after a solution  that also require a hack on angular but that do the job  TriggerEvent does not work as expected   The solution    place the input-field in display none  the input field exist in the DOM but is not visible  place your image right after  On the image use nb-click   to activate a method   When the image is clicked simulate a DOM action  click  on the input field  Et voil      var tmpl     lt input type  file  id    name  -filein                    onchange  angular element this  scope   UpLoadFile this files                     multiple accept    mime      style  display none  placeholder    placeholder    gt                    lt img id    name  -img  src    icon    ng-click  clicked    gt                            Image was clicked let s simulate an input  file  click    scope inputElem   elem find  input       find input in directive    scope clicked   function               console log   Image clicked             scope inputElem 0  click       Warning Angular TriggerEvent does not work

User · Answer

This directive pass the selected files as well         File Input - custom call when the file has changed      directive  onFileChange   function       return       restrict   A       link  function  scope  element  attrs          var onChangeHandler   scope  eval attrs onFileChange          element bind  change   function             scope  apply function               var files   element 0  files            if  files                onChangeHandler files                                                       The HTML  how to use it    lt input type  file  ng-model  file  on-file-change  onFilesSelected  gt    In my controller    scope onFilesSelected   function files         console log  files -     files

User · Answer

No binding support for File Upload control  https   github com angular angular js issues 1375      lt div ng-controller  form-cntlr  gt           lt form gt                lt button ng-click  selectFile    gt Upload Your File lt  button gt                lt input type  file  style  display none                   id  file  name  file  onchange  angular element this  scope   fileNameChanged this     gt           lt  form gt         lt  div gt    instead of     lt input type  file  style  display none       id  file  name  file  ng-Change  fileNameChanged      gt    can you try   lt input type  file  style  display none       id  file  name  file  onchange  angular element this  scope   fileNameChanged      gt       Note  this requires the angular application to always be in debug mode  This will not work in production code if debug mode is disabled    and in your function changes instead of   scope fileNameChanged   function        alert  select file        can you try   scope fileNameChanged   function       console log  select file        Below is one working example of file upload with drag drop file upload may be helpful http   jsfiddle net danielzen utp7j   Angular File Upload Information  URL for AngularJS File Upload in ASP Net  http   cgeers com 2013 05 03 angularjs-file-upload   AngularJs native multi-file upload with progress with NodeJS  http   jasonturim wordpress com 2013 09 12 angularjs-native-multi-file-upload-with-progress   ngUpload - An AngularJS Service for uploading files using iframe   http   ngmodules org modules ngUpload

User · Answer

The simplest Angular jqLite version   JS    directive  cOnChange   function          use strict        return           restrict   A           scope                 cOnChange    amp                      link  function  scope  element                element on  change   function                      scope cOnChange                                       HTML    lt input type  file  data-c-on-change  your functionName    gt

User · Answer

Angular elements  such as the root element of a directive  are jQuery  Lite  objects  This means we can register the event listener like so   link  scope   el        const fileInputSelector     my-file-input       function setFile                access file via  el find fileInputSelector  get 0  files 0              el on  change   fileInputSelector  setFile      This is jQuery event delegation  Here  the listener is attached to the root element of the directive  When the event is triggered  it will bubble up to the registered element and jQuery will determine if the event originated on an inner element matching the defined selector  If it does  the handler will fire   Benefits of this method are    the handler is bound to the  element which will be automatically cleaned up when the directive scope is destroyed  no code in the template will work even if the target delegate  input  has not yet been rendered when you register the event handler  such as when using ng-if or ng-switch    http   api jquery com on

User · Answer

You can simply add the below code in onchange and it will detect change  you can write a function on X click or something to remove file data    document getElementById id  value

User · Answer

Similar to some of the other good answers here  I wrote a directive to solve this problem  but this implementation more closely mirrors the angular way of attaching events    You can use the directive like this   HTML   lt input type  file  file-change  yourHandler  event  files     gt    As you can see  you can inject the files selected into your event handler  as you would inject an  event object into any ng event handler   Javascript  angular    module  yourModule      directive  fileChange      parse   function  parse         return         require   ngModel         restrict   A         link  function   scope  element  attrs  ngModel                Get the function provided in the file-change attribute             Note the attribute has become an angular expression             which is what we are parsing  The provided handler is             wrapped up in an outer function  attrHandler  - we ll             call the provided event handler inside the handler              function below          var attrHandler    parse attrs  fileChange                 This is a wrapper handler which will be attached to the            HTML change event          var handler   function  e                scope  apply function                      Execute the provided handler in the directive s scope                 The files variable will be available for consumption                by the event handler              attrHandler  scope     event  e  files  e target files                                          Attach the handler to the HTML change event          element 0  addEventListener  change   handler  false

User · Answer

I recommend to create a directive   lt input type  file  custom-on-change handler  functionToBeCalled params   gt   app directive  customOnChange    function              use strict            return               restrict   A                scope                    handler    amp                              link  function scope  element                    element change function event                       scope  apply function                            var params    event  event  el  element                           scope handler  params  params                                                                                     this directive can be used many times  it uses its own scope and doesn t depend on parent scope  You can also give some params to handler function  Handler function will be called with scope object  that was active when you changed the input    apply updates your model each time the change event is called

[angularjs] AngularJs: How to check for changes in file input fields?

Examples related to angularjs