Angular js input type = file wont console the data

Question

Hi Im new in angular js and I want to try get the data of my input type = "file" in my html.. But when i console it its just said undefined

html

   <input type="file" ng-model="data.img" ng-click="upload()"/>

js

   $scope.upload = function() {
                console.log($scope.data.img)

            }

Possible duplicate of [ng-model for ](http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file) — Ramesh Rajendran, Apr 26 '17 at 06:43
Check this out, http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file — Mr. J, Apr 26 '17 at 06:43

score 1 · Accepted Answer · answered Apr 26 '17 at 06:44

ng-model does not support for file type input. Need to set the value manually to ngModel using a directive like this

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

call the directive like this

<input type="file" files-input ng-model="data.img" ng-click="upload()"/>

now check the console

score 1 · Answer 2 · answered Apr 26 '17 at 06:45

1

You can do it with a directive. See example here

answered Apr 26 '17 at 06:45

Master Po

1,497
1
23
42

score 1 · Answer 3 · edited May 23 '17 at 12:26

You could go with directive under this discussion : ng-model for <input type="file"/>

But Instead of directive the easiest is to use HTML5 API, namely FileReader HTML is pretty straightforward:

Add

In your controller define 'add' method:

$scope.add = function(){
  var f = document.getElementById('file').files[0],
      r = new FileReader();
  r.onloadend = function(e){
    var data = e.target.result;
    //send your binary data via $http or $resource or do anything else with it
  }
  r.readAsBinaryString(f);
}

Reference here

score 0 · Answer 4 · answered Apr 26 '17 at 07:06

0

use <input type="file" id="file1" name="file1" multiple onchange="angular.element(this).scope().fileNameChanged('file1')"/> instead of your code,

js

 $scope.fileNameChanged = function(inputField) {


var file = document.getElementById(inputField).files;
console.log(file);

answered Apr 26 '17 at 07:06

ramana

48
5

try this one also looks easy . – ramana Apr 26 '17 at 07:11

Angular js input type = file wont console the data

4 Answers4