Как сбросить <input type="file"> в Angular

Решение на jQuery, которое @dhaval-marthak предложил в комментариях, очевидно, работает, но если посмотреть на фактический вызов jQuery, то легко понять, что jQuery просто устанавливает атрибут value в пустую строку. Таким образом, в "чистом" JavaScript это будет выглядеть так:

document.getElementById("uploadCaptureInputFile").value = "";

Если у вас есть следующий HTML-код:

<input type="file" id="fileControl">

то для сброса элемента управления файлом вы можете просто выполнить следующую команду:

$("#fileControl").val('');

Это очистит значение, и пользователь сможет выбрать новый файл. Учтите, что это сработает в большинстве современных браузеров.

Для того чтобы сбросить значение поля <input type="file">, вам необходимо обернуть его в теги <form>. После этого вы сможете сбросить ввод, используя метод сброса формы. Например, вы можете добавить обработчик события onClick на кнопку, которая будет сбрасывать форму следующим образом:

<form>
  <input type="file" id="fileInput">
  <button type="button" onClick="this.form.reset()">Сбросить</button>
</form>

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

Это ЛУЧШЕЕ решение:

input.value = ''

if (!/safari/i.test(navigator.userAgent)) {
  input.type = ''
  input.type = 'file'
}

Из всех ответов здесь это самое быстрое решение. Никакого клонирования input, никакой перезагрузки формы!

Я проверил это во всех браузерах (поддержка даже IE8).

Еще одно решение (без выбора HTML-элементов DOM)

Если вы добавили обработчик события 'change' на этот input, то в JavaScript-коде вы можете вызывать (при определенных условиях):

event.target.value = '';

Например, в HTML:

<input type="file" onChange="onChangeFunction(event)">

А в JavaScript:

function onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // предполагаем, что у этого файла есть расширение

  if (extension === 'jpg') {
    alert('Хорошее расширение файла!');
  } else {
    event.target.value = '';
    alert('Неправильное расширение файла! Поле ввода очищено.');
  }
}

Такой подход позволяет обрабатывать изменения в input без необходимости выбирать элементы DOM, что может быть полезно для оптимизации кода.