CODEWITHSUNDEEP
htmlangularjs
TheCleverIdiot
TheCleverIdiot

Reputation: 410

How to get image dimensions in AngularJS?

I want to check the dimensions of the image when the user selects the file to upload with <input type = "file">

So far I've done this code:

HTML

<input type="file" accept=".png,.jpeg,.jpg"  ng-files="getTheFiles($files)" ng-model='company.logo'>

AngularJS

  var reader = new FileReader();
  reader.readAsDataURL($files[0]);      
  reader.onload = function(e) {         
      $scope.imgpath = new Image();
      $scope.imgpath = e.target.result;
      console.log($scope.imgpath.width, $scope.imgpath.height);  
  }

In the console, the height and width of the selected image is being shown as 0,0.

I've referred the answer(which is not accepted but upvoted 5 times) from this question.

Thank you for your help.

Upvotes: 2

Views: 5919

Answers (2)

TheCleverIdiot
TheCleverIdiot

Reputation: 410

Okay I tried this code and it worked:

                var fileReader = new FileReader();
                $scope.imgpath = new Image();
                fileReader.onload = function (event) {
                    $scope.imgpath.src = event.target.result;
                    $scope.imgpath.onload = function(){
                        console.log(this.width, this.height);
                    };
                };

Source : This code from CodePen

Upvotes: 2

Icycool
Icycool

Reputation: 7179

$scope.imgpath = e.target.result;

should be

$scope.imgpath.src = e.target.result;

Upvotes: -1

Related Questions