Async checking image width and height and if they are OK, preview image

Question

I'm trying to check width and height from an input file's images and check if they are at least equal than specific dimension (w:300px, h:300px).

I have this check:

window.onload = function () {
    var fileUpload = document.getElementById("inputFileID");
    fileUpload.onchange = function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = document.getElementById("divToShowThumbs");
            dvPreview.innerHTML = "";
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            for (var i = 0; i < fileUpload.files.length; i++) {
                var file = fileUpload.files[i];
                if (regex.test(file.name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = document.createElement("IMG");
                        img.src = e.target.result;
                        dvPreview.appendChild(img);
                    }
                    reader.readAsDataURL(file);
                } else {
                    alert(file.name + " is not a valid image file.");
                    dvPreview.innerHTML = "";
                    return false;
                }
            }
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    }
};

This works ok to preview each image. But when I try to use "IF - ELSE" using img.width, it returns 0 because it works in asynchronous way!

Any light about how can I solve this situation? All I'm trying to do is read each image, check if they area 300px (height and width) and if Ok, create the preview!

score 0 · Accepted Answer · answered Nov 28 '17 at 07:56

I got help from this - Getting width & height of an image with filereader . And here is your modified script.

        window.onload = function () {
        var fileUpload = document.getElementById("inputFileID");
        fileUpload.onchange = function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = document.getElementById("divToShowThumbs");
                dvPreview.innerHTML = "";
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                for (var i = 0; i < fileUpload.files.length; i++) {
                    var file = fileUpload.files[i];
                    if (regex.test(file.name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = document.createElement("IMG");
                            img.src = e.target.result;                        

                            img.onload = function() {
                                // access image size here 
                                console.log(this.width + " " + this.height);

                                if(this.width <=300 && this.height <=300 )  {
                                    dvPreview.appendChild(img);
                                }
                                else {
                                    alert("too big an image!");
                                }
                            };

                        };
                        reader.readAsDataURL(file);
                    } else {
                        alert(file.name + " is not a valid image file.");
                        dvPreview.innerHTML = "";
                        return false;
                    }
                }
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        };
    };

Async checking image width and height and if they are OK, preview image

1 Answers1