I am trying to upload an image and check whether this is a valid image with a Javascript function.

function validateImage() {
  var formData = new FormData();

  var file = document.getElementById("img").files[0];

  formData.append("Filedata", file);
  var t = file.type.split('/').pop().toLowerCase();
  if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
    alert('Please select a valid image file');
    document.getElementById("img").value = '';
    return false;
  }
  if (file.size > 1024000) {
    alert('Max Upload size is 1MB only');
    document.getElementById("img").value = '';
    return false;
  }
  return true;
}

<form action="/upload" method="post" enctype="multipart/form-data">
  Image<input type="file" name="upl" accept="image/*" onchange="validateImage()"><br>
  <input type="submit" value="Submit">
</form>

I am trying to upload an image and check whether this is a valid image with a Javascript function.

function validateImage() {
  var formData = new FormData();

  var file = document.getElementById("img").files[0];

  formData.append("Filedata", file);
  var t = file.type.split('/').pop().toLowerCase();
  if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
    alert('Please select a valid image file');
    document.getElementById("img").value = '';
    return false;
  }
  if (file.size > 1024000) {
    alert('Max Upload size is 1MB only');
    document.getElementById("img").value = '';
    return false;
  }
  return true;
}

<form action="/upload" method="post" enctype="multipart/form-data">
  Image<input type="file" name="upl" accept="image/*" onchange="validateImage()"><br>
  <input type="submit" value="Submit">
</form>

The function validateImage() is not called and the next message is displayed:

Uncaught ReferenceError: validateImage is not defined at HTMLInputElement.onchange

Any idea?

• javascript
• html

• Run your snippet and read the error message. You have no element with id="img". – connexo Commented Mar 24, 2018 at 16:25
• You are right, but still is not working. It works in the Snippet tho, I don't know why. – Antman Commented Mar 24, 2018 at 16:37
• We can only work with the code you're providing here. And that, with that small fix, works. – connexo Commented Mar 24, 2018 at 16:37
• It was a problem with .js file imports. Now it works. Great guys! – Antman Commented Mar 24, 2018 at 16:39
• Pick your answer. – connexo Commented Mar 24, 2018 at 18:29

1 Answer 1

You have no element with id="img". Add the id or choose a different method to select the file input in your JS code.

function validateImage() {
  console.log("validateImage called");
  var formData = new FormData();

  var file = document.getElementById("img").files[0];

  formData.append("Filedata", file);
  var t = file.type.split('/').pop().toLowerCase();
  if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
    alert('Please select a valid image file');
    document.getElementById("img").value = '';
    return false;
  }
  if (file.size > 1024000) {
    alert('Max Upload size is 1MB only');
    document.getElementById("img").value = '';
    return false;
  }
  return true;
}

<form action="/upload" method="post" enctype="multipart/form-data">
  Image<input id="img" type="file" name="upl" accept="image/*" onchange="validateImage()"><br>
  <input type="submit" value="Submit">
</form>