Image Width Height Via AngularJS (ng-file-upload)

Question

I need to validate the image width - height on the basis of 1:3 ratio. I am using ng-file-upload to upload the image. The validation needs to be done before sending it to server.

I am clueless about how to get the image width/height from the selected image. Can somebody help me out ?

I am following the tutorial from this site : http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx

Answer 1

That would be a feature request for the plugin. As a workaround you can do this:

<div ngf-select ngf-model="image" ngf-validate-fn-async="validateRatio(image)" ngf-pattern="'image/*'" accept="image/*" >

$scope.validateRatio = function(image) {
  var defer = $q.defer();
  Upload.imageDimensions(image).then(function(d) {
    if (d.width / d.height === expectedRatio) {
      defer.resolve()
    } else {
      defer.reject();
    }
  }, function() {defer.reject();});
  return defer.promise;
}

or

<div ngf-select ngf-model="image" ngf-pattern="'image/*'" ngf-min-height="0" accept="image/*" >
<div ng-show="image.width && (image.width / image.height !== expectedRatio)">Invalid ratio?

EDIT Feature is added You can have

<div ngf-select ngf-model="image" ngf-ratio="1x3" ngf-pattern="'image/*'" accept="image/*" >