How to properly check image resolution with jQuery before uploading?

Question

JavaScript

Hello, the project on Asp.Net MVC is used and there is a form on which there is input type="file" on which the rule is hung. The task is to immediately after we have selected the image, check it for height and width. Here is the code

<input type="file" name="FacebookImage" class="input-width-hundred-percent"  data-rule-imageFacebookResolution="true" id="FacebookImage" />

Here is the validation

$.validator.addMethod("data-rule-imageFacebookResolution", function (value, elem, attrValue) {
            var _URL = window.URL;
                var file, img;
                if ((file = elem.files[0])) {
                    img = new Image();
                    img.onload = function () {
                        alert("Width:" + this.width + "   Height: " + this.height);
 
                        if (this.width < 520 && this.height < 290) {
                            return false;
                        } 
                            return true;
                     
                    };
                    img.src = _URL.createObjectURL(file);
            }
            return false;
        }, "Минимальное разрешение должно быть 520 x 290);

But the problem is in the onload function itself, since it is asynchronous, even if I load an image with the correct resolution, the validation error still remains and, accordingly, the form does not pass validation. The Save button has the following:

$("#SaveBtn").click(function () {
            var form = $("#ettings");
            form.validate();
            if (form.valid()) {
                var data = new FormData(document.getElementById('settings'));
                $.ajax({
                    url: '@Url.Action(MVC.Product.SocialShareEdit())',
                    type: "POST",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function () {
                        $("#modal").modal('hide');
                        $.ajax({
                            url: '@Url.Action(MVC.Product.SocialShareIconsPartial(Model.DeliveryType))',
                            type: "POST",
                            processData: false,
                            contentType: false,
                            success: function (message) {
                                $("#Icons").html(message);
                            }
                        });
                    }
                });
            }
            });

The question is how to properly validate an image? Is it possible to do without onload? Thanks

Answer 1

I would do so. I would hang an onchange handler on the input file, determine the width and height of the image in it, and put this matter in the dataset, and in the filter I would already check from the dataset values.

$('#FacebookImage').on('change',function(){
            var elem = this;
            var _URL = window.URL;
                var file, img;
                if ((file = elem.files[0])) {
                    img = new Image();
                    img.onload = function () {
                        elem.dataset['imageWidth'] = this.width;
                        elem.dataset['imageHeight'] = this.height; 
                    };
                    img.src = _URL.createObjectURL(file);
            }
});

And now the validator is like this

$.validator.addMethod("data-rule-imageFacebookResolution", function (value, elem, attrValue) {
   var width = parseInt(elem.dataset['width']);
   var height = parseInt(elem.dataset['height']);
   
   if width  < 520 && height  < 290) {
      return false;
   } 
   return true;
});

Thus, getting the size of the picture occurs when the file is selected, and by the time the user reaches the "send" button, the picture has already loaded, well, or you can still block the "send" button until the onload of images occurs.
The code may not be correct, I have not tried it, I typed it as is, but I think the idea is clear.