1

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 .

RAJ
  • 229
  • 2
  • 14
  • 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](https://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload) – MarioZ Sep 26 '17 at 10:52

1 Answers1

2

You'll want to use naturalWidth and naturalHeight:

$scope.userPic.naturalHeight();
$scope.userPic.naturalWidth();
Kyle Krzeski
  • 6,183
  • 6
  • 41
  • 52
  • Can't I get using the file-model value I mean console.log(userPic.naturalWidth()); Instead of using the id. – RAJ Sep 25 '17 at 18:13
  • 1
    you probably need to use $scope.userPic for it to work. – pegla Sep 25 '17 at 19:09
  • @William TypeError: $scope.userPic.naturalWidth() is not a function I am getting this error – RAJ Sep 26 '17 at 05:07
  • @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. – MarioZ Sep 26 '17 at 05:26
  • @MarioZ If I remove the () parentheses at the end as you suggested in its undefined. – RAJ Sep 26 '17 at 05:37
  • @user3270582 If they're isn't already an image, you'll have to create one `new Image()` like this: http://jsfiddle.net/9Lk11e8c/ – Kyle Krzeski Sep 26 '17 at 11:59