Почему при попытке удаления файла из fileList по индексу удаляются так же все остальные файлы?

Question

[godsplane]

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

Comments

[Алан Гибизов]

Пользуйтесь тэгом

<codepen src="https://codepen.io/poylar/pen/MWqmQNX"/>

[Rise]

godsplane, проще с нуля написать, чем разобраться, вам не нужен DataTransfer и MutationObserver, вы не в тему их используете совсем, поэтому возникают всякие сторонние эффекты.

[godsplane]

Rise, ну mutation observer для другой задачи, прост код зацепился. а по поводу datatransfer согласен

[Poliklot]

godsplane, актуально?

Answer 1

[zkrvndm]

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

Допустим если в переменных file1 и file2 лежат единичные файлы, то объединить их в FileList можно так:

var dt  = new DataTransfer(); // Создадим объект для работы с drag and drop

dt.items.add(file1); // Добавим первый файл
dt.items.add(file2); // Добавим второй файл

var file_list = dt.files; // Извлечем FileList

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

Но повторюсь, так лучше не делать. Правильная практика здесь это в принципе не пытаться редактировать тип FileList, а создать свой обработчик файлов. Само поле input использовать чисто для получения файла, но не для отображения и хранения! Логику для отображения пишем отдельно.

Comments

[godsplane]

А если я скажу что это просто для отображения прикрепленных файлов к инпуту без драг энд дроп, то вы скажете что datatransfer тут не нужен, так?

[imko]

godsplane, о зачем при отображении файлов их удалять? 0_о

[zkrvndm]

godsplane, я скажу, возьмите готовый плагин для отправки файлов)

А так, для вас наверное самый простой вариант для редактирования выбранных файлов это использовать поле input с мультивыбором:

<input id="file" type="file" name="file[]" multiple>

Можно в одно поле несколько файлов прикрепить и если что не понравилось всегда можно переприкрепить их.

[godsplane]

Надим Закиров, да я бы с радостью только вот найти плагин под нативную верстку без js фреймворков трудно

[zkrvndm]

godsplane, easy-code.ru/lesson/ajax-file-upload-form
Там есть функция отмены прикрепления файла. Достаточно отрубить авто отправку формы и будет то, что вы хотели. Смотрите пример.

[godsplane]

Надим Закиров, нуу, jquery