How can I get the image size before uploading?

How can I get the image size before uploading? I need to get the size to validate that the image is at least X pixel width and height.

I know I can do it like this in a directive that I apply to the <img> element itself.

        link: function(scope, element, attributes) {
            element.on('load', function () {
                scope.cmsImageSize.originalHeight = this.height;
                scope.cmsImageSize.originalHidth = this.width;
            });
        }

But how do I get it from within my files I’m watching? I’ve spent now some time inspecting the objects I have there but couldn’t figure out from where I could get the image dimensions.

$scope.$watch('data.files', function() {
                for (var i = 0; i < $scope.data.files.length; i++) {
                    var file = $scope.data.files[i];
                    $scope.upload = $upload.upload({
                        url: '/api/v1/image_files/upload.json',
                        method: 'POST',
                        data: {
                            'data[ImageFile][model]': 'CmsPageElementImage',
                            'data[ImageFile][foreign_key]': $scope.element.CmsPageElement.id
                        },
                        file: file,
                        fileFormDataName: 'data[ImageFile][file]'
                    }).progress(function (evt) {
                                            /* ... */
                    }).success(function (data, status, headers, config) {
                                            /* ... */
                    });
                }
            });

[burzum]

OK, I’ve managed to get it to work with this code. Guess this is how it has to be done in JS, looks like an ugly work-around to me.

                    var fr = new FileReader;
                    fr.onload = function () { // file is loaded
                        var img = new Image;
                        img.onload = function () {
                            alert(img.width); // image is loaded; sizes are available
                        };
                        img.src = fr.result; // is the data URL because called with readAsDataURL
                    };
                    fr.readAsDataURL(file); // I'm using a <input type="file"> for demonstrating

[danialfarid]

If you have ngf-max-width or similar validation, the width and height of the image will be calculated automatically and you can get it by file.width or file.height. You can also use Upload,imageDimensions(file).then(success, error)