Compressing Image in Javascript before Uploading

Question

I have a form where i accept image of a student, mother and father. along with multiple other data. When i click on submit i need to compress the image, if it is available (i am validating candidates image as its madatory). Initially i was uploading uncompressed image which was working. I am trying to start by compressing the candidate image initially and if that works i can move to other two as well.

I have used below code but it always returns null.

fileReader.readAsDataURL(candidateImages );

Above line always sends null. I have taken reference from some online tutorial but i am not able to make it work.Code works for father and mother image as it is Appreciate all the help.

    var fileReader = new FileReader();
    var filecontent;
    fileReader.onload = function (event) {
      var image = new Image();
      
      image.onload=function(){
          document.getElementById("original-Img").src=image.src;
          var canvas=document.createElement("canvas");
          var context=canvas.getContext("2d");
          canvas.width=image.width/4;
          canvas.height=image.height/4;
          context.drawImage(image,
              0,
              0,
              image.width,
              image.height,
              0,
              0,
              canvas.width,
              canvas.height
          );
          
         filecontent = canvas.toDataURL();
      }
    };
     function saveImageToFolder() { //called on click of submit
            var formData = new FormData();
            var candidateImages = document.getElementById("candidateImage").files[0];
          fileReader.readAsDataURL(candidateImages );
            var image=new Image();
           image.src=filecontent;

     formData.append("StudentImage", image);
            formData.append("FatherImage", document.getElementById("fatherImage").files[0]); //old code
            formData.append("MotherImage", document.getElementById("motherImage").files[0]); //old code
          var requestUrl = '/SaveStudentImage/StudentRegistrationImage';
            $.ajax({
                url: requestUrl,
                type: 'POST',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (imageResponse) {
                    saveStudentImg(imageResponse);
                },
                error: function () {
                }
            })
        }

As asked in Comment, i am attaching the snippet of html code which picks image :=

     <div class="col-lg-4 col-12 form-group">
                        <label class="text-dark-medium">Upload Candidate's Photo *</label>
                        <input type="file" class="form-control-file" id="candidateImage">
 <div class="col-lg-2 col-12 form-group">
                    <label class="text-dark-medium">Upload Photo</label>
                    <input type="file" class="form-control-file" id="fatherImage">
                </div>
 <div class="col-lg-2 col-12 form-group">
                    <label class="text-dark-medium">Upload Photo</label>
                    <input type="file" class="form-control-file" id="motherImage">
                </div>
                </div>

On click of submit i am validating that file is uploaded and format is image:- jpeg,jpg or png. and post that i am calling saveImageToFolder method.