How to validate an single/multiple image in Javascript and show error message below the input with prevent default submit?

Question

Actually I have a form where with image input. I want to validate image for three condition like

1. extension should be png, jpg
2. size should be less than 2048kb
3. less than 200px x 200px is consider as dimension

I wrote an function and solve 1 and 2 issue. To solve issue 3 , I use image reader inside onload listener and when I clicked it can not prevent submit also if I remove 3, then it works fine ! Is there any solution in JS that solve above issue?

Here is a slide of my code in below.

function isImageValid(idName) {

    var fileUpload = document.getElementById(idName);
     var fileName = document.getElementById(idName).value;


    if (typeof (fileUpload.files) != "undefined") {
        for (var i=0; i<fileUpload.files.length;i++)
   {
    //    console.log(fileUpload.files[i]);
        var valid_dimension = 0;

       var reader = new FileReader();

        //Read the contents of Image File.
        reader.readAsDataURL(fileUpload.files[0]);
        reader.onload = function (e) {

        //Initiate the JavaScript Image object.
        var image = new Image();

        //Set the Base64 string return from FileReader as source.
        image.src = e.target.result;

        //Validate the File Height and Width.
        image.onload = function () {
            var height = this.height;
            var width = this.width;

            if (height>200||width>200) {

           valid_dimension =1;
            // alert("Height and Width must not exceed 200px.");
             return false;
            }
        //    alert("Uploaded image has valid Height and Width.");
             return true;
        };


        };
         var size = parseFloat(fileUpload.files[0].size / 1024).toFixed(2);
         var extension = fileName.split('.').pop();

       if( valid_dimension ==1||size>2048||(extension!='jpg'&&extension!='JPG'&&extension!='JPEG'&&extension!='jpeg'&&extension!='png'&&extension!='PNG'))
       return false;
       else
       return true;
   }



    } else {
       return false;
    }
}

And,

    const form = document.getElementById('employee_form');
  form.addEventListener('submit', (e)=>{

var is_avatar_img_valid = isImageValid('avatar');
if(is_avatar_img_valid==false){

         e.preventDefault();
         document.getElementById("avatar").style.borderColor = "red";
         document.getElementById('avatar_validator_message').innerHTML = 'Invalid image';
       }
       else{
        document.getElementById("avatar").style.borderColor = "black";
        document.getElementById('avatar_validator_message').innerHTML = '';
      }
}

Answer 1

Inside the form eventlister you need to use

e.preventDefault()

The full code looks like this

const form = document.getElementById('employee_form');
form.addEventListener('submit', (e) => {
    e.preventDefault()

    var is_avatar_img_valid = isImageValid('avatar');
    if (is_avatar_img_valid == false) {

        e.preventDefault();
        document.getElementById("avatar").style.borderColor = "red";
        document.getElementById('avatar_validator_message').innerHTML = 'Invalid image';
    }
    else {
        document.getElementById("avatar").style.borderColor = "black";
        document.getElementById('avatar_validator_message').innerHTML = '';
    }
});