Image upload, acquire image dimensions in directive - angularjs

Question

I have following angular-js directive to 'upload' local Images:
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function () {
var values = [];
angular.forEach(element[0].files, function (item) {
var value = {
// File Name
name: item.name,
//File Size
size: item.size,
//File URL to view
url: (URL || webkitURL).createObjectURL(item),
// File Input Value
_file: item
};
values.push(value);
});
scope.$apply(function () {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);
I now want to acquire the image-dimensions, but I don't know how.
I tried something like that (below the line values.push(value)):
var img = new Image();
img.src = value.url;
alert("Width: " + img.width);
but that didn't work. I also tried with img.onload, but I coudn't get a result either.
How can I acquire the image-dimensions?
Thanks!

Answer 1

Solved it by myself, image.onload was the right way to go:
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function () {
var values = [];
angular.forEach(element[0].files, function (item) {
var img = new Image();
var imgheight = 0;
var imgwidth = 0;
var imgurl = (URL || webkitURL).createObjectURL(item);
img.src = imgurl;
img.onload = function() {
imgheight = img.height;
imgwidth = img.width;
//alert("Width: " + imgheight + " height: " + imgwidth);
var value = {
// File Name
name: item.name,
//File Size
size: item.size,
//File URL to view
url: imgurl,
// File Input Value
_file: item,
width: imgwidth,
height: imgheight,
mystyle: {}
};
scope.$apply(function () {
values.push(value);
});
};
});
scope.$apply(function () {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);