Не меняйте текст входного файла на непринятый файл

Question

У меня есть код, который реализует, что если пользователь выбирает файл, который не является jpg, jpeg или png, он отображает сообщение об ошибке.

async function read(input) {
  var file = input.files[0];
  var idxDot = file.name.lastIndexOf(".") + 1;
  var extFile = file.name.substr(idxDot, file.name.length).toLowerCase();
  if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
      fileContent = await readFile(file);
  }else{
      alert("Only jpg, jpeg or png allowed");
  }

}

Это вызывается из этого:

<input type="file" align="center" accept=".jpg,.jpeg,.png" onchange="read(this)"/>

Проблема в том, что независимо от того, какой файл был взят, он изменяет текст входного файла на выбранный файл, независимо от того, принят ли он или нет. Хотя fileContent остается пустым или имеет последнее значение для последнего выбранного принятого файла, показанный файл является другим.

Как избежать такого поведения, чтобы, если принятый файл был выбранным, текст выбранный файл не изменен?

Answer 1

Вы можете предотвратить изменение текста входного файла, просто установив значение ввода на null, например:

async function read(input) {
  var file = input.files[0];
  var idxDot = file.name.lastIndexOf(".") + 1;
  var extFile = file.name.substr(idxDot, file.name.length).toLowerCase();
  if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
      fileContent = await readFile(file);
  }else{
      alert("Only jpg, jpeg or png allowed");
      input.value = null;
  }
}

DEMO:

async function read(input) {
  var file = input.files[0];
  var idxDot = file.name.lastIndexOf(".") + 1;
  var extFile = file.name.substr(idxDot, file.name.length).toLowerCase();
  if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
      //fileContent = await readFile(file);
      alert("Valid file selected!");
  }else{
      alert("Only jpg, jpeg or png allowed");
      input.value = null;
  }
}

<input type="file" align="center" accept=".jpg,.jpeg,.png" onchange="read(this)"/>
<br/>
<p>Please select a non-image file like a pdf for testing.</p>