CODEWITHSUNDEEP
javascriptjqueryangularjs
Elamparithi.P
Elamparithi.P

Reputation: 149

Angularjs : Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

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 .

Upvotes: 0

Views: 5294

Answers (1)

Vinod Louis
Vinod Louis

Reputation: 4876

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/

Upvotes: 1

Related Questions