ng-model for `<input type=“file”/>` (with directive DEMO)

Question

I tried to use ng-model on input tag with type file:

But after selecting a file, in

Answer 1

How to enable to work with ng-model

Working Demo of Directive that Works with ng-model

The core ng-model directive does not work with 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 .

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);
      })
    }
  }
});

  
    
AngularJS Input `type=file` Demo
    
    

    

    
Name
Date
Size
Type

    

      
{{file.name}}
      
{{file.lastModified | date  : 'MMMdd,yyyy'}}
      
{{file.size}}
      
{{file.type}}