up vote 0 down vote favorite

I need to upload multiple images in a div , i try the below

angular code :

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

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

html code :

    <input type="file" ng-model-instant  name="myImage" accept="image/*" onchange="angular.element(this).scope().imageUpload(event)"/>

I got this error :

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
at b.$scope.imageUpload (new_ads.js:34)
at HTMLInputElement.onchange (new_ads:202)

I saw some links here ,that all for single image uploading , i need to upload multiple image one by one to a div .

Can anybody help me thanks a lot in advance .

share
1  
try element.files[0] – Vinod Louis Feb 7 at 8:02
    
Don't use the readAsDataURL use URL.createObjectURL(element.files[0]) instead, and don't forget to revoke the url once the image is loaded or errored – Endless Feb 7 at 15:35
up vote 0 down vote

Your code require 2 changes

1 : Its not element.files but element.target as element here is param resolve to event

2 : .files is an array you need to select the first file by files[0]

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

    }

See this fiddle http://jsfiddle.net/ADukg/9867/

share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.