How to preview multiple images using angularJs?

Question

I want to select multiple images, and show selected images on the browser.
My code is working fine when I select single image.

How can I modify my code, so that it can select and show multiple images on the browser?

HTML Code :

<input type="file" name="file" id='file' multiple="multiple" required="required" onchange="angular.element(this).scope().imageUpload(event)"/>

Image Preview:

 <img ng-src="{{step}}" class="thumb">

Angular code :

$scope.imageUpload = function(event){
  var files = event.target.files;
  var file = files[files.length-1];
  $scope.file = file;
  var reader = new FileReader();
                reader.onload = $scope.imageIsLoaded;
                reader.readAsDataURL(file);
}

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

What I've tried:

Instead of passing single file element, I have passed array of files, but then I am getting this exception:
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. at b.$scope.imageUpload (products.js:174) at HTMLInputElement.onchange (VM2346 multer:1)

Modified code:

$scope.imageUpload = function(event){
  var files = event.target.files;
  var file = []
  for(var i = 0 ; i < event.target.files.length ; i++){

file.push(event.target.files[i]);

}

file.forEach(function(element){
  console.log('File array log :' + element.name);
})
  $scope.file = file;
  var reader = new FileReader();
                reader.onload = $scope.imageIsLoaded;
                reader.readAsDataURL(file);
}

Please help.

mayank bisht · Accepted Answer · 2017-12-12 07:08:02Z

1

I found this working for me

function previewImages() {

  var $preview = $('#preview').empty();
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {
    
    if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
      return alert(file.name +" is not an image");
    } // else...
    
    var reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {src:this.result, height:100}));
    });

    reader.readAsDataURL(file);
    
  }

}

$('#file-input').on("change", previewImages);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file-input" type="file" multiple>
<div id="preview"></div>

answered Dec 12, 2017 at 7:08

mayank bisht

87410 silver badges19 bronze badges

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

Comments

Abdullah Dibas · Accepted Answer · 2017-09-30 09:35:17Z

0

The method readDataURL is to read one file not array of files, in addition to that, your html is expecting only one image and it's not handling how to show a group of images. Your controller's script should look like the following:

// inside your controller's script: 

$scope.imageUpload = function(event){ 
  var steps= [];
  var isLastFile = false;

  for(var i = 0 ; i < event.target.files.length ; i++){  
    console.log('File array log :' + event.target.files[i].name);
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded;
    if(i == event.target.files.length - 1){
      isLastFile  = true;
    }
    reader.readAsDataURL(event.target.files[i]);
 }
 $scope.imageIsLoaded = function(e){
    $scope.$apply(function(){
    steps.Push(e.target.result);
      if(isLastFile){
        $scope.steps = steps;
      } 
    })
 }
}

Also try the following in your html view:

<ol>
   <li ng-repeat="step in steps"> <img ng-src="{{step}}" class="thumb"></li>
</ol>

answered Sep 30, 2017 at 9:35

Abdullah Dibas

1,5071 gold badge9 silver badges13 bronze badges

4 Comments

mayank bisht Over a year ago

Thanks for the answer, but I am also passing an array to reader.readAsDataURL(file). file is an array.

mayank bisht Over a year ago

Your code is working, but when I first select the images it won't show up the images, on second time selection it's showing the images, why?

Abdullah Dibas Over a year ago

@mayankbisht as what I have mentioned in the answer you should not pass array of files to readAsDataURL method.

mayank bisht Over a year ago

oh okay, got that point. But why your code is not working for the first time i.e. when I first select the image(s), it won't appear on the page, but when I select image(s) for the second time, then they appears. Why this is happening?

Collectives™ on Stack Overflow

How to preview multiple images using angularJs?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related