Tony Tony -4 years ago 125
AngularJS Question

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

I use the following example, it works perfectly , but I'd like to upload multiple images simultaneously.

http://jsfiddle.net/kkhxsgLu/2/

<div ng-controller="MyCtrl">

<div ng-repeat="step in stepsModel">
<img class="thumb" ng-src="{{step}}" />
</div>

<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" />




$scope.stepsModel = [];

$scope.imageUpload = function(element){
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
}

$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}


Thank you kindly help me, I started with angularjs

Answer Source

SOLUTION:

http://jsfiddle.net/orion514/kkhxsgLu/136/

:)

<div ng-controller="MyCtrl">

<div ng-repeat="step in stepsModel">
    <img class="thumb" ng-src="{{step}}" />
</div>

<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" multiple />

$scope.stepsModel = [];

$scope.imageUpload = function(event){
     var files = event.target.files; //FileList object

     for (var i = 0; i < files.length; i++) {
         var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded; 
             reader.readAsDataURL(file);
     }
}

$scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        $scope.stepsModel.push(e.target.result);
    });
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download