Сброс значения input file в ReactJS: как загружать один файл

Быстрый ответ

Чтобы обнулить ввод файла в ReactJS, необходимо изменить атрибут key. Когда ключ меняется, то компонент реинициализируется, и данные ввода очищаются.

<input type="file" key={inputKey} />

Важно увеличивать значение inputKey в состоянии компонента, чтобы инициировать его обнуление:

const [inputKey, setInputKey] = useState(0);
setInputKey(inputKey + 1); // На самом деле, это не "inputKey++", но результат такой же!

Очистите ввод без перерисовки компонента

Если требуется удалить данные без перерисовки компонента, можно прямо обратиться к DOM-элементу через атрибут ref:

Создание ref для элемента ввода файла

const fileInputRef = useRef(); // Refs – это как домашние питомцы, но они реже кусают!

const handleReset = () => {
  // Вуаля, файла как не бывало! Как Терминатор среди файлов.
  fileInputRef.current.value = '';
};

return (
  <>
    <input type="file" ref={fileInputRef} />
    <button onClick={handleReset}>Сбросить</button>  // Не нажимайте спонтанно, это определит судьбу вашего файла!
  </>
);

Подробнее об этом расскажет наш спикер на видео

Синхронизируем событие загрузки файла

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

const handleChange = (event) => {
  // Здесь происходит обработка загружаемого файла
  event.target.value = null; // Null – это пустота. Она затирает всё на своём пути.
};

Перерисовка с помощью уникального ключа

Если хотите использовать ref для принудительной перерисовки, примените компонент с новым ключом — как будто меняете своё имя в захватывающем боевике!

const forceResetKey = () => Math.random().toString(); // Случайные числа — ваш уникальный ключ!

<input type="file" key={forceResetKey()} onChange={yourUploadHandler} />

Методы для устаревших браузеров

Не забываем про пользователей старых версий браузеров, таких как IE9 или IE10. Для них тоже есть способ очистить ввод файла.

Особенности работы со старыми браузерами

В классических браузерах отсутствует поддержка назначения null или пустой строки ('') для input.value, поэтому в этом случае всё решается заменой элемента:

const resetFileInputForLegacyBrowsers = () => {
  // Старые браузеры, мы помним о вас!
  const oldInput = document.getElementById("myFileInput");
  const newInput = document.createElement("input");

  newInput.type = "file";
  newInput.id = oldInput.id;
  oldInput.parentNode.replaceChild(newInput, oldInput); // Старым атрибутам пора на замену. Давайте что-то новенькое!
};

Осторожно: распространённые ошибки

Переход кажется простым, но при обнулении ввода файла в React, можно столкнуться с проблемами.

Выбираем момент для сброса

Не размещайте логику сброса наугад. Ответственно выбирайте момент, чтобы избегать ошибок, когда сброс не происходит должным образом, или задержек в интерфейсе.

Проблемы с повторным выбором файла

Учтите, что очистка поля ввода должна позволить повторно выбрать тот же файл. Некоторые браузеры, из-за своей специфики, могут не активировать событие onChange в таких случаях. Чтобы заставить их это делать, нужно очистить их "память".

Обнуление состояния в React

Если информация о выбранных файлах хранится в состоянии React, убедитесь, что при очистке поля ввода, вы также обнуляете это состояние.

Есть вопросы, пожелания, предложения?

Столкнулись с конкретной проблемой или есть другие технические вопросы? Обращайтесь к нам за помощью, разъяснениями и обсуждением эффективных методов программирования!

Визуализация

Ещё здесь? Представьте, что водяной шарик (💧🎈) — это ваш ввод файла в ReactJS:

Текущее состояние: [💧🎈] = шарик наполнен водой (файл выбран)

Процесс обнуления ввода теперь выглядит так:

1. Прокол шарика 💉 → [Пустой шарик]
2. Перезаполняем водой 🔁 → [💧🎈] (Готов к новому выбору файла)

Теперь преобразуем эту аналогию в код:

<input type="file" ref={inputRef} />
<button onClick={() => { inputRef.current.value = null; }}>Сбросить</button>

Таким образом, шарик готов к заполнению, и ваш ввод файла очищен и ждёт нового файла.

Полезные материалы

1. Неуправляемые компоненты – React — Официальная документация React о работе с полями ввода файла.
2. Как в input type="file" выбрать тот же файл повторно в компоненте React — Обсуждение на Stack Overflow о обнулении ввода файла в React.
3. Refs и DOM – React — Повторим, как с помощью ref в React можно управлять DOM-элементами, включая поля ввода файла.
4. Паттерны React — Улучшите свои навыки, используя шаблоны для работы с ref в ваших React-приложениях.
5. Документация API — Описание процесса очистки значений ввода с помощью React Hook Form.
6. Свойства и методы формы — Узнайте о стратегиях обнуления форм в JavaScript, которые можно использовать в реактивных приложениях.
7. Очистка поля ввода файла | CSS-Tricks — Полезные методы для обнуления элемента ввода файла.