AngularJS - upload and display image using FileReader API (multiple files) [duplicate]

Answer 1

Directive to get files input with ng-model (multiple files)

The AngularJS built-in directive does not handle . One needs a custom directive for that.

The files-input directive:

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

The above directive adds a change listener that updates the model with the files property of the input element.

This directive enables to automatically work with the ng-change and ng-form directives.

The DEMO on PLNKR

---

Inline Demo of files-input Directive

angular.module("app",[]);

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

  
    
AngularJS Input `type=file` Demo
    
    
    
    
Files
    

      {{file.name}}