Как добавлять и удалять файлы в input type="file"?

Question

[chegcheg]

Все доброго времени суток!

Подскажите готовые решения, позволяющие реализовать возможность добавления/удаления файлов, загружаемых в <input type="file" />.

Например:

1. в диалоговом окне выбора файлов выбираем необходимые для загрузки файлы, нажимаем "Открыть"
   
2. после этого в определнном блоке появляется список всех загружаемых файлов с кнопкой "удалить", при нажатии на которую удаляются этот файл (не все!)
   
3. при повторном открытии окна и добавлении новых файлов список уже подключенных файлов не зачищается,
   а дополняется
   

Допускается drag and drop, но это не принципиально.
Загрузка файлов на сервер не требуется, т.к. они будут передаваться для отправки на почту средствами ajax.

Смотрел в сторону dropzone.js, но, насколько я понял, там файлы как раз загружаются на сервер.

Comments

[Stalker_RED]

Доступ к FileList только на чтение. Вы не можете оттуда ничего удалять, только очистить его целиком.
Как альтернатива - вместо отправки input вместе с формой загружать нужные файлы AJAX'ом.

[Леонид Князев]

Смотрел в сторону dropzone.js, но, насколько я понял, там файлы как раз загружаются на сервер.

Видимо вы, что то упустили: Enqueuing file uploads

[Павел Корнилов]

Усиленно копать в сторону FileReader.

Answer 1

[Александр Гонтарев]

и так:
1)

<input onchange="handleChange" type="file" />

<!-- как-то циклом выводи Store.files -->
<span>file 1</span>
<button onclick="(e) => removeFile(0)">remove file</button>

<span>file 2</span>
<button onclick="(e) => removeFile(1)">remove file</button>

2)

const Store = {
  files: [], // какое-то хранищие файлов, для примера так
}

// при выборе файлов, мы будем их добавлять
function handleChange(e) {
  // если не выбрали файл и нажали отмену, то ничего не делать
  if (!e.target.files.length) {
    return;
  }

  // создаем новый массив с нашими файлами
  const files = Object.keys(e.target.files).map((i) => e.target.files[i]);

  addFiles(files); добавляем файлы в хранилище
  
  // очищаем input, т.к. файл мы сохранили
   e.target.value = '';
}

function addFiles(files) {
  // добавляем файлы в общую кучу
  Store.files = Store.files.concat(files);
}

// удалить файл из хранилища, например по индексу в массиве
function removeFile(index) {
  // удаляем файл по индексу
  Store.files.splice(index, 1);
}

// если надо послать файлы на сервер, формируем FormData с файлами
// const formData = getFilesFormData(Store.files);
function getFilesFormData(files) {
    const formData = new FormData();

    files.map((file, index) => {
        formData.append(`file${index + 1}`, file);
    });

    return formData;
}

ну вот как-то так

Comments

[chegcheg]

Суть в том, что мне нужно эти файлы добавить в уже созданную formData, которая создается в "другом" коде. Можно ли все подключенные файлы добавить туда, но при этом так, чтобы они все были объединены в одно знаечние, например, files?

[Александр Гонтарев]

chegcheg, getFilesFormData как пример я написал, суть в том, что у нас есть files, а чтобы добавить в FormData нужно просто по циклу перебрать файлы и добавить append их в FormData, а где и как эта FormData создается, уже на ваше усмотрение

[sajtim]

Я понимаю, вопорс упирался в возможность манипулирования FileList, но насколько я понял возможности удаления, добавления файлов в этом типе нет :-(

[Denis_133]

А как в массив записать файлы и вывести их ?

Answer 2

[pfr46]

Это плохо тем, что если более 2, и будет

<button onclick="(e) => removeFile(3)">remove file</button>

то на клике с removeFile(2) с removeFile(3) уже не удалить так как в хранилище будет 0 и 1.