How to get image size using angular -file-upload

Question

I am currently using the angular-file-upload directive, and I pretty much use the exact codes from the demo.

I need to add some step to check the image size, and I can only do it now through jQuery / javascript.

Just wondering if there is an “angular” way to check the size of an image before loading it?

$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 this:

 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 a code snippet copied from https://github.com/nervgh/angular-file-upload/blob/master/examples/image-preview/directives.js .

I think this is more angular. However, you may need to modify it to suit your requirements.

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; } } }); 

Answer 3

You can use checks like ngf-max-width and you will have your sizes in the .width file.

A source