и так:
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;
}
ну вот как-то так
