ng-model for input type file with directive DEMO

Question

I tried to use ng-model on input tag with type file    lt input type  file  ng-model  vm uploadme    gt    But after selecting a file  in controller   scope vm uploadme is still undefined   How do I get the selected file in my controller

User · Answer

function filesModelDirective      return       controller  function  parse   element   attrs   scope         var exp    parse  attrs filesModel          element on  change   function            exp assign  scope  this files 0             scope  apply                           app directive  filesModel   filesModelDirective

User · Answer

For multiple files input using lodash or underscore    directive  fileread    function          return           scope                fileread                         link  function  scope  element  attributes                element bind  change   function  changeEvent                    return   map changeEvent target files  function file                     scope fileread                         var reader   new FileReader                      reader onload   function  loadEvent                          scope  apply function                                scope fileread push loadEvent target result                                                                   reader readAsDataURL file

User · Answer

This is a slightly modified version that lets you specify the name of the attribute in the scope  just as you would do with ng-model  usage         lt myUpload key  file  gt  lt  myUpload gt    Directive    directive  myUpload   function         return           link  function postLink scope  element  attrs                element find  input   bind  change   function changeEvent                                            var reader   new FileReader                    reader onload   function loadEvent                        scope  apply function                             scope attrs key    loadEvent target result                                                                                            if  typeof changeEvent target files 0        object                         reader readAsDataURL changeEvent target files 0                                                           controller   FileUploadCtrl           template                    lt span class  btn btn-success fileinput-button  gt                       lt i class  glyphicon glyphicon-plus  gt  lt  i gt                       lt span gt Replace Image lt  span gt                       lt input type  file  accept  image    name  files    multiple    gt                       lt  span gt            restrict   E

User · Answer

This is an addendum to  endy-tjahjono s solution    I ended up not being able to get the value of uploadme from the scope  Even though uploadme in the HTML was visibly updated by the directive  I could still not access its value by  scope uploadme  I was able to set its value from the scope  though  Mysterious  right     As it turned out  a child scope was created by the directive  and the child scope had its own uploadme    The solution was to use an object rather than a primitive to hold the value of uploadme   In the controller I have     scope uploadme        scope uploadme src         and in the HTML     lt input type  file  fileread  uploadme src   gt    lt input type  text  ng-model  uploadme src   gt    There are no changes to the directive    Now  it all works like expected  I can grab the value of uploadme src from my controller using  scope uploadme

User · Answer

I had to modify Endy s directive so that I can get Last Modified  lastModifiedDate  name  size  type  and data as well as be able to get an array of files  For those of you that needed these extra features  here you go   UPDATE  I found a bug where if you select the file s  and then go to select again but cancel instead  the files are never deselected like it appears  So I updated my code to fix that     directive  fileread   function              return               scope                    fileread                                 link  function  scope  element  attributes                    element bind  change   function  changeEvent                        var readers                                files   changeEvent target files                           datas                            if  files length                           scope  apply function                                  scope fileread                                                           return                                            for   var i   0   i  lt  files length   i                               readers  i     new FileReader                            readers  i   index   i                          readers  i   onload   function  loadEvent                                var index   loadEvent target index                              datas push                                   lastModified  files index  lastModified                                  lastModifiedDate  files index  lastModifiedDate                                  name  files index  name                                  size  files index  size                                  type  files index  type                                  data  loadEvent target result                                                             if   datas length     files length                                    scope  apply function                                          scope fileread   datas                                                                                                                       readers  i   readAsDataURL  files i

User · Answer

I had to do same on multiple input  so i updated  Endy Tjahjono method  It returns an array containing all readed files      directive  fileread   function          return         scope            fileread                     link  function  scope  element  attributes            element bind  change   function  changeEvent              var readers                      files   changeEvent target files                 datas                  for   var i   0   i  lt  files length   i                   readers  i     new FileReader                readers  i   onload   function  loadEvent                  datas push  loadEvent target result                  if   datas length     files length                    scope  apply function                        scope fileread   datas                                                                readers  i   readAsDataURL  files i

User · Answer

How to enable  lt input type  quot file quot  gt  to work with ng-model Working Demo of Directive that Works with ng-model The core ng-model directive does not work with  lt input type  quot file quot  gt  out of the box  This custom directive enables ng-model and has the added benefit of enabling the ng-change  ng-required  and ng-form directives to work with  lt input type  quot file quot  gt    x000D   x000D  angular module  app        angular module  app   directive  selectNgFiles   function       return       require   ngModel       link  function postLink scope elem attrs ngModel          elem on  change   function e            var files   elem 0  files          ngModel  setViewValue files                          x000D   lt script src    unpkg com angular angular js  gt  lt  script gt     lt body ng-app  app  gt       lt h1 gt AngularJS Input  type file  Demo lt  h1 gt            lt input type  file  select-ng-files ng-model  fileArray  multiple gt        lt code gt  lt table ng-show  fileArray length  gt       lt tr gt  lt td gt Name lt  td gt  lt td gt Date lt  td gt  lt td gt Size lt  td gt  lt td gt Type lt  td gt  lt tr gt       lt tr ng-repeat  file in fileArray  gt         lt td gt   file name   lt  td gt         lt td gt   file lastModified   date     MMMdd yyyy    lt  td gt         lt td gt   file size   lt  td gt         lt td gt   file type   lt  td gt       lt  tr gt       lt  table gt  lt  code gt          lt  body gt  x000D   x000D   x000D

User · Answer

I created a workaround with directive    directive  fileread    function          return           scope                fileread                         link  function  scope  element  attributes                element bind  change   function  changeEvent                    var reader   new FileReader                    reader onload   function  loadEvent                        scope  apply function                              scope fileread   loadEvent target result                                                            reader readAsDataURL changeEvent target files 0                                           And the input tag becomes    lt input type  file  fileread  vm uploadme    gt    Or if just the file definition is needed    directive  fileread    function          return           scope                fileread                         link  function  scope  element  attributes                element bind  change   function  changeEvent                    scope  apply function                          scope fileread   changeEvent target files 0                          or all selected files                         scope fileread   changeEvent target files

User · Answer

Try this this is working for me in angular JS      let fileToUpload      documentLocation    documentType  pdf       let absoluteFilePath   path resolve   dirname  fileToUpload       console log  Uploading document   absoluteFilePath         element all by css  input type  file      sendKeys absoluteFilePath

User · Answer

If you want something a little more elegant integrated  you can use a decorator to extend the input directive with support for type file  The main caveat to keep in mind is that this method will not work in IE9 since IE9 didn t implement the File API  Using JavaScript to upload binary data regardless of type via XHR is simply not possible natively in IE9 or earlier  use of ActiveXObject to access the local filesystem doesn t count as using ActiveX is just asking for security troubles    This exact method also requires AngularJS 1 4 x or later  but you may be able to adapt this to use  provide decorator rather than angular Module decorator - I wrote this gist to demonstrate how to do it while conforming to John Papa s AngularJS style guide    function          use strict                   ngdoc input        name input file               description       Adds very basic support for ngModel to  input type file   fields              Requires AngularJS 1 4 x or later  Does not support Internet Explorer 9 - the browser s       implementation of  HTMLInputElement  must have a  files  property for file inputs               param  string  ngModel        Assignable AngularJS expression to data-bind to  The data-bound object will be an instance        of   link https   developer mozilla org en-US docs Web API FileList  FileList           param  string   name Property name of the form under which the control is published         param  string   ngChange        AngularJS expression to be executed when input changes due to user interaction with the        input element             angular          module  yourModuleNameHere            decorator  inputDirective   myInputFileDecorator        myInputFileDecorator  inject      delegate     browser     sniffer     filter     parse        function myInputFileDecorator  delegate   browser   sniffer   filter   parse            var inputDirective    delegate 0               preLink   inputDirective link pre           inputDirective link pre   function  scope  element  attr  ctrl                if  ctrl 0                     if  angular lowercase attr type       file                         fileInputType                          scope  element  attr  ctrl 0    sniffer   browser   filter   parse                     else                       preLink apply this  arguments                                                       return  delegate             function fileInputType scope  element  attr  ctrl   sniffer   browser   filter   parse            element on  change   function  ev                if  angular isDefined element 0  files                     ctrl  setViewValue element 0  files  ev  amp  amp  ev type                                     ctrl  isEmpty   function  value                return  value    value length     0                           Why wasn t this done in the first place  AngularJS support is intended to reach only as far back as IE9  If you disagree with this decision and think they should have just put this in anyway  then jump the wagon to Angular 2  because better modern support is literally why Angular 2 exists      The issue is  as was mentioned before  that without the file api   support doing this properly is unfeasible for the core given our   baseline being IE9 and polyfilling this stuff is out of the question   for core       Additionally trying to handle this input in a way that is not   cross-browser compatible only makes it harder for 3rd party solutions    which now have to fight disable workaround the core solution                I m going to close this just as we closed  1236  Angular 2 is being   build to support modern browsers and with that file support will   easily available

User · Answer

I use this directive   angular module  appFilereader       directive  appFilereader   function  q        var slice   Array prototype slice       return           restrict   A           require    ngModel           link  function scope  element  attrs  ngModel                    if   ngModel  return                   ngModel  render   function                        element bind  change   function e                        var element   e target                        q all slice call element files  0  map readFile                            then function values                                if  element multiple  ngModel  setViewValue values                               else ngModel  setViewValue values length   values 0    null                                                    function readFile file                            var deferred    q defer                             var reader   new FileReader                            reader onload   function e                                deferred resolve e target result                                                      reader onerror   function e                                deferred reject e                                                      reader readAsDataURL file                            return deferred promise                                               change                  link          return       and invoke it like this    lt input type  file  ng-model  editItem  attachments uri image  accept  image    app-filereader   gt    The property  editItem editItem  attachments uri image  will be populated with the contents of the file you select as a data-uri       Please do note that this script will not upload anything  It will only populate your model with the contents of your file encoded ad a data-uri  base64    Check out a working demo here  http   plnkr co CMiHKv2BEidM9SShm9Vv

User · Answer

I create a directive and registered on bower  This lib will help you modeling input file  not only return file data but also file dataurl or base 64         quot lastModified quot   1438583972000       quot lastModifiedDate quot    quot 2015-08-03T06 39 32 000Z quot        quot name quot    quot gitignore global txt quot        quot size quot   236       quot type quot    quot text plain quot        quot data quot    quot data text plain base64 DQojaWdub3JlIHRodW1ibmFpbHMgY3JlYXRlZCBieSB3aW5kb3dz   xoDQoqLmJhaw0KKi5jYWNoZQ0KKi5pbGsNCioubG9nDQoqLmRsbA0KKi5saWINCiouc2JyDQo  quot     https   github com mistralworks ng-file-model

[angularjs] ng-model for `<input type="file"/>` (with directive DEMO)

Examples related to angularjs

Examples related to angularjs-ng-model

Examples related to angularjs-fileupload