How to access HTML input FileUpload FileList object using AngularJS?

Question

I want to access the value of the FileList object when I Choose files using HTML input FileUpload. When I console.log this FileList object, I can see this object in the console window but I am not able to access the values using AngularJS.

This is my code:-

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="MyCtrl">

<input type="file" id="myFile" multiple size="50" ng-model="file" onchange="angular.element(this).scope().myFunction()">

<p id="demo" ng-repeat="file in fileList">
  Name: {{file.name}} </br>
  Type: {{file.type}} </br>
</p>
{{fileList}}

</div>
<script>
var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function($scope){
 $scope.myFunction = function(){
    var x = document.getElementById("myFile");
    $scope.fileList = x.files;
    console.log($scope.fileList); 
 };
}]);

</script>
</body>
</html>

Tina · Accepted Answer · 2016-12-03 15:47:03Z

2

This directive has a pretty good API for working with files: https://github.com/danialfarid/ng-file-upload

The usage section has some examples you can follow, including ones that work with multiple files.

answered Dec 3, 2016 at 15:47

Tina

1,26412 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access HTML input FileUpload FileList object using AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related