I have been struggling with this for a couple of days. I do not know why it keeps saying that my file is not a type of blob. Any help?

HTML BELOW

<form style="padding-top:10px;" method="post" action="upload.php" enctype="multipart/form-data">
                                    <input style="padding-bottom: 20px;" type="file" id="file" name="file" onchange="fileValidation(this);">
                                    <div id="responsefromfileupload" value=""></div>
                                </form>

JAVASCRIPT BELOW

function fileValidation(reader) {

var file = $("input[type=file]").get(0).files[0];
var fileInput = document.getElementById('file');
var filePath = fileInput.value;

// Allowing file type
var allowedExtensions =
    /(\.jpg|\.jpeg|\.png|\.gif)$/i;


if (!allowedExtensions.exec(filePath)) {

$("#responsefromfileupload").replaceWith(`<div style="width: 50%;" class="alert alert-danger" role="alert">
                                                    This image file type is not accepted!</div>`);
    
}

if (allowedExtensions.exec(filePath)) {

    var reader = new FileReader();

    reader.onload = function () {
        $("#previewImg").attr("src", reader.result);
        $("#previewImg").attr("margin-left", "25%");
    }

  }
  reader.readAsDataURL(file);
}