CODEWITHSUNDEEP
angularjs
mayank bisht
mayank bisht

Reputation: 874

How to preview multiple images using angularJs?



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.

Upvotes: 0

Views: 2389

Answers (2)

mayank bisht
mayank bisht

Reputation: 874

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>

Upvotes: 1

Abdullah Dibas
Abdullah Dibas

Reputation: 1507

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>

Upvotes: 0

Related Questions