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)

            }

```

Answer: 
* You could go with `directive` under this discussion : [ng-model for <input type="file"/>](https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file)

---

* But Instead of `directive` the easiest is to use HTML5 API, namely [`FileReader`](http://jsfiddle.net/f8Hee/1/) 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](https://stackoverflow.com/questions/18571001/file-upload-using-angularjs)
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);

```