godsplane
@godsplane

Как современный подход к модификации содержания input files FileList?

Пытаюсь написать свой кастомный input[type="file"], которые при change показывает какие файлы прикреплены, рядом есть крестик чтобы удалить из прикрепления только этот файл.

До этого использовал DataTransfer API, но прочитал что это эксперементальная технология и ее не стоит использовать.

Узнал что input.files только для чтения и это уже устаревшая технология которую поддерживают только чтобы ничего не сломалось на готовых проекта, а современные проекты:
Note: This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).


Вот я ищу адекватное решение удаления файлов из списка тех которые выбрал пользователь для загрузки.
Интернет кишит каким то ненормальным кол-во способов на jquery имеющий тот же концепт с input.files
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
@risejs
1. input.files не является устаревшим (на MDN эта заметка явно лишняя и не имеет практического смысла, потому что не существует замены).
2. dataTransfer.files не является экспериментальным (на MDN в этом смысле написано про нестандартные свойства и методы присущие Gecko, он же Firefox).

Эти два концепта не являются одинаковыми и взаимозаменяемыми:
1. input.files это пользователь добавляет файлы через окно выбора файлов.
2. dataTransfer.files это пользователь добавляет файлы через перетаскивание файлов.

Больше других способов нет, и нет никакой им "современной" альтернативы.

И input.files и dataTransfer.files возвращают FileList. FileList состоит из File. File это Blob. Все Blob-подобные объекты можно добавить или удалить в FormData. FormData можно отправить через XMLHttpRequest или fetch на сервер.

Это не является каким-то супер современным подходом, так работает довольно давно, других способов и нет. Для этого вам не нужно модифицировать FileList, потому что главное что вы добавите в FormData.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@mrStrike
Уже все было готово до.
<a href="https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery/">https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery</a>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы