Как работать с дополнительным добавлением файлов через input (multiple)?

Question

[Анатолий]

Имеется форма, в которой вводятся Имя, Фамилия и несколько фото (multiple).
Через input добавляю например 2 фото, затем хочу добавить еще 1. Но при добавлении последнего, у меня теряются предыдущие 2.

Как сделать обработчик, чтобы решить этот вопрос?
Доп. нюанс: Если файл не соответствует размеру или типу, то он отображается ниже кнопки input, но перечеркнут. При этом его можно удалить (это я потом сам сделаю).

<form action="" method="post" enctype="multipart/form-data" name="anketa">
    <input type="file" name="images[]" multiple id="imageUploader">
    <input type="text" name="name" placeholder="Имя" id="name">
    <input type="text" name="lastname" placeholder="Фамилия" id="lastname">
    <input type="submit">
</form>
<script>
    const imageUploader = document.getElementById("imageUploader");
    let imageArrAll = []; // Все загруженные файлы, в том не подходящие по типу или размеру
    let imageArrFilter = []; // Отфильтрованные файлы

    imageUploader.addEventListener('change', (e) => {
        сonst files = e.target.files;
        // Здесь нужно:
        // 1. Объединить добавленные файлы с уже имеющими в массиве (без дублей), и записать в массив imageArrAll
        // 2. Проверить все файлы на соответствие типу и размеру, и записать их в массив imageArrFilter
        // 3. Изменить массив в форме в форме images[] на файлы из п.2. 
    });
</script>

Comments

[Александр]

const addedFiles = [];

const createImprint = (file) => {
  const payload = [file.name, file.type, file.size, file.lastModified];

  return payload.map(entry => btoa(encodeURIComponent(entry))).join('_');
};

input.addEventListener('change', event => {
    const { files } = event.target;
    const existingImprints = addedFiles.map(entry => entry.imprint);

    for (const file of files) {
        const imprint = createImprint(file);
        if (!existingImprints.includes(imprint)) {
            addedFiles.push({
                file,
                imprint
            });
        }
    }

    event.target.value = '';
});

[Александр]

Анатолий,

filter = addedFiles.reduce((acc, entry) => {
    if (entry.file.size <= maxSize && type.includes(entry.file.type)) {
        acc.push(entry.file);
    }
    return acc;
}, []);

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

[Александр]

Анатолий, поправил.

[Анатолий]

Александр, а как его теперь совместить с формой?

let form = new FormData(anketa);
form.delete('images[]');  // Удаляем массив картинок

const maxSize = 2 * 1024 * 1024;
const type = ["image/jpeg", "image/png"];

images = addedFiles.reduce((acc, entry) => {
    if (entry.file.size <= maxSize && type.includes(entry.file.type)) { acc.push(entry.file); }
    return acc;
}, []);

Как теперь красивее form.append(images) сделать? Ну т.е. прям так вставлять нельзя, нужно вставлять ключ и значение.

[Александр]

Анатолий, https://developer.mozilla.org/en-US/docs/Web/API/F...

[Анатолий]

Александр, спасибо огромное.
Напишите в ответы, я отмечу решением.