How to get the image dimension with angular-file-upload - angularjs

Question

I'm currently using the angular-file-upload directive, and I'm pretty much using the exact codes from the demo.
I need to add a step in there to test for the dimension of the image, and I am only currently able to do with via jQuery/javascript.
Just wondering if there's a "angular" way to check for the dimension of the image before it's being uploaded?
$scope.uploadImage = function($files) {
$scope.selectedFiles = [];
$scope.progress = [];
if ($scope.upload && $scope.upload.length > 0) {
for (var i = 0; i < $scope.upload.length; i++) {
if ($scope.upload[i] !== null) {
$scope.upload[i].abort();
}
}
}
$scope.upload = [];
$scope.uploadResult = [];
$scope.selectedFiles = $files;
$scope.dataUrls = [];
for ( var j = 0; j < $files.length; j++) {
var $file = $files[j];
if (/*$scope.fileReaderSupported && */$file.type.indexOf('image') > -1) {
var fileReader = new FileReader();
fileReader.readAsDataURL($files[j]);
var loadFile = function(fileReader, index) {
fileReader.onload = function(e) {
$timeout(function() {
$scope.dataUrls[index] = e.target.result;
//------Suggestions?-------//
$('#image-upload-landscape').on('load', function(){
console.log($(this).width());
});
//-------------------------//
});
};
}(fileReader, j);
}
$scope.progress[j] = -1;
if ($scope.uploadRightAway) {
$scope.start(j);
}
}
};

Answer 1

I think you can do it by:
var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(filtItem._file);
function onLoadFile(event) {
var img = new Image();
img.src = event.target.result;
console.log(img.width, img.height)
}
This is the code snippet copied from https://github.com/nervgh/angular-file-upload/blob/master/examples/image-preview/directives.js.
I think this is more angularjs. However, you may need to modify it to fit your requirement.

Answer 2

Try this code
uploader.filters.push({
name: 'asyncFilter',
fn: function(item /*{File|FileLikeObject}*/ , options, deferred) {
setTimeout(deferred.resolve, 1e3);
var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(item);
function onLoadFile(event) {
var img = new Image();
img.onload = function(scope) {
console.log(img.width,img.height);
}
img.src = event.target.result;
}
}
});