On image upload get dimension(width and height) validation using angularjs

Question

Hi am a newbie to angular JS . I have been trying do something, I have a login form in which I have a file input type where user can upload his picture. The input field is like this

<input type="file" file-model="userPic"/>

So, in the controller.js file on submit of the form when I

console.log(userPic)

I get the file name, size, modified date . But I want to find the dimensions of the upload picture width and height before the form submit. I have also bower components installed I that I have jquery folder inside that I have dimensions.js file is that useful ?

I have also tried to console.log using .width().For that I changed the code a little bit

<input type="file" file-model="userPic" id="userId"/>

and in the controller.js file on form submit

console.log($('#userId').width());

I have tried this but the output I get is not correct . How would I proceed .

Take a look at this question / answer, it's not angularjs but can guide you: https://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload — MarioZ
– MarioZ, Commented Sep 26, 2017 at 10:52

Kyle · Accepted Answer · 2017-09-25 19:16:00Z

2

You'll want to use naturalWidth and naturalHeight:

$scope.userPic.naturalHeight();
$scope.userPic.naturalWidth();

edited Sep 25, 2017 at 19:16

answered Sep 25, 2017 at 18:12

Kyle

6,5276 gold badges44 silver badges56 bronze badges

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

6 Comments

RAJ Over a year ago

Can't I get using the file-model value I mean console.log(userPic.naturalWidth()); Instead of using the id.

pegla Over a year ago

you probably need to use $scope.userPic for it to work.

RAJ Over a year ago

@William TypeError: $scope.userPic.naturalWidth() is not a function I am getting this error

MarioZ Over a year ago

@user3270582 in javascript naturalWidth is a property, JQuery manages it as a function, I fear Angularjs does not. So try to use as a property removing the () parentheses at the end.

RAJ Over a year ago

@MarioZ If I remove the () parentheses at the end as you suggested in its undefined.

|

Collectives™ on Stack Overflow

On image upload get dimension(width and height) validation using angularjs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related