Управление FileList в HTML5: как удалить файл из списка

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

Чтобы исключить файл из FileList, создайте новый объект FormData и добавьте в него необходимые файлы. Непосредственное изменение FileList невозможно.

function filterFiles(fileList, excludeIndex) {
  let newData = new FormData();
  Array.from(fileList).forEach((file, index) => {
    if (index !== excludeIndex) newData.append('file', file);
  });
  return newData; // Вернём изменённый FormData
}

Мы обходим ограничения FileList, преобразовывая его в массив.

Борьба с неизменностью FileList

FileList — это продукт эволюции современных браузеров, инструмент для работы с файлами, которые были загружены через <input type="file"> или перетащены на веб-страницу. Однако FileList нельзя изменять прямо.

Однако мы, разработчики, изощрены и всегда найдем способы обойти это ограничение.

Манипуляция с массивами: свет в конце туннеля

Преобразуем FileList в массив:

let fileListArray = Array.from(fileList); // преобразуем в массив 
fileListArray.splice(indexToRemove, 1); // удаляем нежелательный элемент

Мы можем обойти ограничения FileList, манипулируя <input type="file">.

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

Белый лист: трюк с пустым полем ввода

Если вы допустили ошибку, просто начните сначала:

document.getElementById('fileInput').value = "";

FileList после этого будет чист, как нерасписанный лист бумаги.

Drag-and-Drop: ни пуха, ни пера

Если вы работаете со зонами для перетаскивания файлов, вам поможет объект DataTransfer:

dropArea.addEventListener('drop', event => {
  event.preventDefault();
  let newFiles = new DataTransfer();
  
  Array.from(event.dataTransfer.files).forEach(file => {
    newFiles.items.add(file);
  });

  document.getElementById('fileInput').files = newFiles.files;
});

С DataTransfer можно управлять файлами при перетаскивании, как это делают профессионалы.

Трудности перевода: сценарии из реальных условий

Старые добрые браузеры

Учитывайте старые браузеры, применяя современные методы, такие как Array.from(). Подключите полифилл, и ваш код будет работать даже в устаревших версиях браузеров.

Мастер событий

Управление событиями — это ваш инструментарий:

• event.stopPropagation(): Используйте, чтобы информация не достигала нежелательных слушателей.
• event.preventDefault(): Предотвращает стандартное поведение браузера, давая вам полный контроль.

Будьте великодушны: проверка поддержки API

Перед использованием функций JavaScript проверьте поддержку API:

if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Все технологии поддерживаются
} else {
  alert('File API не полностью поддерживаются в вашем браузере.');
}

Не забудьте проверить ваши инструменты перед приступом к работе.

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

Представляйте FileList как парад файлов:

Парад: [📄1, 📄2, 📄3, 📄4, 📄5]

Для удаления одного файла необходимо провести реорганизацию:

let newFiles = [...oldFileList].filter((file, index) => index !== unwantedIndex);

Теперь парад выглядит так — без 📄3:

Новый парад: [📄1, 📄2, 📄4, 📄5]

Примечание: вы не можете изменить FileList, но можете создать новую коллекцию без нежелательных файлов.

Пользовательский опыт: ваша комфортная зона

Пусть сообщения об ошибках и уведомления будут полезными и дружелюбными. Компетентное управление ошибками повышает доверие пользователей.

Мышление на ходу: Обновление DOM

Интегрируйте новый выбор файлов в пользовательский интерфейс легким и понятным способом.

Внимание к деталям: обработка ответов сервера

Внимательно обрабатывайте данные, полученные от сервера:

fetch(uploadEndpoint, {
  method: 'POST',
  body: newFormData // Обновлённый FormData
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

Ваше приложение будет держать связь с сервером на прочном уровне.

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

1. FileList – Web APIs | MDN — подробное объяснение объекта FileList.
2. File – Web APIs | MDN — подробный обзор File API.
3. HTML Standard — стандарты для элементов ввода файлов.
4. File and FileReader — гид по работе с файлами в JavaScript.
5. Read files in JavaScript — руководство по чтению файлов с использованием JavaScript.
6. javascript – Clearing <input type='file' /> using jQuery – Stack Overflow — рассказ о том, как очистить выбор файла.