Проверьте расширение файла и предупредите пользователя, если это не файл изображения, используя javascript

const fileInput = document.querySelector('input[type = "file"]');
const submitBtn = document.querySelector('button[type = "submit"]');
 submitBtn.disabled = true;
    fileInput.addEventListener('change', () => {
      const fileName = fileInput.value;
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
      if (fileType !== 'jpg' && fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'gif') {
        alert('File is not an image');
        fileInput.value = '';
        submitBtn.disabled = true; // Disable the submit button
  } else {
    submitBtn.disabled = false; // Enable the submit button
  }
  });

    .fileInput{
    text-align:center;
    margin-top:10%;
    }

    <div class = "fileInput">
    <input type = "file" id = "fileInput">
    <button type = "submit">Upload</button>
    </div>

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector("input").addEventListener("change", changeHandler);
});

function changeHandler() {
    const validFileExtensions = ['jpeg', 'jpg', 'png'];
    // 'this' refers to the 'input' HTML element
    // Assigning 'this' to the 'element' variable is not 
    // necessary but assigned here for code readability.
    let element = this;
    // Check if the element has a FileList before checking each file
    if (element.files && element.files.length) {
        for (i = 0; i < element.files.length; i++) {
            const file = element.files[i];
            const filename = file.name;
            const extension = filename.split('.').pop();
            if (validFileExtensions.includes(extension)) {
                console.info("VALID file -> " + filename);
            }
            else {
                console.info("INVALID file -> " + filename);
            }
        }
    }
}

<input type = "file" multiple />

$("input[type=file]").on('change', function() {

  //Get uploaded file extension
  var extension = $(this).val().split('.').pop().toLowerCase();
  // Create array with the files extensions that we wish to upload
  var validFileExtensions = ['jpeg', 'jpg', 'png'];
  //Check file extension in the array.if -1 that means the file extension is not in the list.
  if ($.inArray(extension, validFileExtensions) == -1) {
    $('#filetype').text("File type is not valid").show();
    $('#btnSubmit').prop('disabled', true);
  }
  // Check if the element has a FileList before checking each file
  if (this.files && this.files.length) {
    var message = "";
    for (i = 0; i < this.files.length; i++) {
      var file = this.files[i];
      var filename = file.name;
      var extension = filename.split('.').pop();
      if (!validFileExtensions.includes(extension)) {
        message += filename + " is not a valid file type. ";
      }
    }
    if (message !== "") {
      $('#filetype').text(message).show();
      $('#btnSubmit').prop('disabled', true);
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "file" id = "fileInput" multiple>
<span id = "filetype"></span>
<button type = "submit">Upload</button>