Как добавить в контактную форму на добавить больше фото Html, JS, PHPmailer

В общем есть контактная форма с отправлением на эл. почту на HTML,JS + phpMAILER библиотека. Всё работает, но добавляется только 1 фото, потратил дни что-бы сделать возможность исправить это, но никак не получается. Я только учусь, и по большей части делал отправку по туториалу,но теперь не могу изменить на то, что нужно мне. Нужно показ всех фото при загрузке в input, после отправка всех фото на эл почту.

Javascript

"use strict"
// Contact form
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form');
    form.addEventListener('submit', formSend);

    async function formSend(e) {
        e.preventDefault();

        let error = formValidate(form);

        let formData = new FormData(form);
        formData.append('image',formImage.files[0]);

        if (error === 0) {
            form.classList.add('_sending');
            let response = await fetch('sendmail.php', {
                method: 'POST',
                body: formData
            });
            if (response.ok) {
                let result = await response.json();
                alert(result.message);
                formPreview.innerHTML = '';
                form.reset();
                form.classList.remove('_sending');
            } else {
                Alert("Klaida");
                form.ClassList.remove('_sending');
            }
        }   else {
                alert('Užpildykite visus reikalingus laukus');
        }
    }

    function formValidate(form) {
        let error = 0;
        let formReq = document.querySelectorAll('._req');

        for (let index = 0; index < formReq.length; index++) {
            const input = formReq[index];
            formRemoveError(input);
            if (input.value === '') {
                formAddError(input);
                error++;
            }
        }
    return error;
    }

    function formAddError(input) {
        input.parentElement.classList.add('_error');
        input.classList.add('_error');
    }
    function formRemoveError(input) {
        input.parentElement.classList.remove('_error');
        input.classList.remove('_error');
    }

    // Add input file to var
    const formImage = document.getElementById('formImage');
    // Adding div for file preview
    const formPreview = document.getElementById('formPreview');

    formImage.addEventListener('change', () => {
        uploadFile(formImage.files[0]);
    });

    function uploadFile(file) {
        if(!['image/jpeg'].includes(file.type)) {
            alert('Leidziamas tik jpeg formatas.');
            formImage.value = '';
            return;
        }

        if (file.size > 6 * 1024 * 1024) {
            alert('Nuotrauka negali būti didesne nei 6 MB.');
            return;
        }

        var reader = new FileReader();
        reader.onload = function (e) {
            formPreview.innerHTML = `<img src="${e.target.result}" alt="image">`;
        };
        reader.onerror = function (e) {
            alert('Klaida');
        }
        reader.readAsDataURL(file); 
    }
});
                    <form class="form__body" autocomplete="on" id="form">
                        <div class="form__left">
                            <label for="form__manufacturer" data-i18n="car_manufacturer"></label>    
                            <input id="form__manufacturer" name="name" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                        <div class="form__right">
                            <label for="form__model" data-i18n="car_model"></label>                
                            <input id="form__model" name="model" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                        <div class="form__left">
                            <label for="form__engine" data-i18n="car_engine"></label>
                            <input id="form__engine" name="engine" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                        <div class="form__right">
                            <label for="form__transmission">Pavarų dėžė</label>
                            <input id="form__transmission" name="transmission" type="text" class="feedback-input form__input _email _req" placeholder="">
                        </div>
                        <div class="form__left">
                            <label for="form__price" data-i18n="car_price"></label>
                            <input id="form__price" name="price" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                        <div class="form__right">
                            <label for="form__years" data-i18n="car_years"></label>
                            <input id="form__years" name="years" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                        <div class="form__left">
                            <label for="form__phone" data-i18n="car_phone"></label>
                            <input id="form__phone" name="phone" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                        <div class="form__right">
                            <label for="form__city" data-i18n="car_city"></label>
                            <input id="form__city" name="city" type="text" class="feedback-input form__input _req" placeholder="">
                        </div>
                            <label for="form__defects" data-i18n="car_defects"></label>
                            <textarea id="form__defects" name="text" class="feedback-input" placeholder="Defektai"></textarea>
                        <div class="file__item">
                            <label for="formImage"></label>
                            <input id="formImage" accept=".jpg" type="file" name="image" class="file__input" multiple>
                            <div class="file__button" data-i18n="car_photos"></div>
                        </div>
                        <div id="formPreview"></div>
                            <input type="submit" id="submit.button" value="SIŪLYTI">
                    </form>

sendmail.php

<?php

    if(trim(!empty($_POST['name']))){
        $body.='<p><strong>Automobilio marke: </strong>'.$_POST['name'].'</p>';
    }
    if(trim(!empty($_POST['model']))) {
        $body.='<p><strong>Model: </strong>' .$_POST['model'].'</p>';
    }
    if(trim(!empty($_POST['engine']))) {
        $body.='<p><strong>Eng: </strong>' .$_POST['engine'].'</p>';
    }
    if(trim(!empty($_POST['transmission']))) {
        $body.='<p><strong>Tran: </strong>' .$_POST['transmission'].'</p>';
    }
    if(trim(!empty($_POST['years']))) {
        $body.='<p><strong>Year: </strong>' .$_POST['years'].'</p>';
    }
    if(trim(!empty($_POST['price']))) {
        $body.='<p><strong>Price: </strong>' .$_POST['price'].'</p>';
    }
    if(trim(!empty($_POST['city']))) {
        $body.='<p><strong>City: </strong>' .$_POST['city'].'</p>';
    }
    if(trim(!empty($_POST['phone']))) {
        $body.='<p><strong>Phone:: </strong>' .$_POST['phone'].'</p>';
    }
    if(trim(!empty($_POST['text']))) {
        $body.='<p><strong>Def: </strong>' .$_POST['text'].'</p>';
    }
    // ADD images
    if (!empty($_FILES['image']['tmp_name'])) {
        $filePath = __DIR__ . "/assets/images/" . $_FILES['image']['name'];
        // Download file
        if (copy($_FILES['image']['tmp_name'], $filePath)) {
            $fileAttach = $filePath;
            $body.='<p><strong>Nuotraukos: </strong>';
            $mail->addAttachment($fileAttach);
        }
    }

    $mail->Body = $body;

    if (!$mail->send()) {
        $message = 'Klaida';
    } else {
        $message = 'Issiusta!';
    }

    $response = ['message' => $message];

    header('Content-Type: application/json');
    echo json_encode($response);
?>

Ответы (1 шт):

Автор решения: Василий Музыка

в самом js скрипте изменить

formData.append('image',formImage.files[0]); 

на:

formData.append('image',formImage.files);

В html где импут

<input id="formImage" accept=".jpg" type="file" name="image" class="file__input" multiple> 

изменить на:

<input id="formImage" accept=".jpg" type="file" name="image[]" class="file__input" multiple>

Ну и в php обработать цыклом foreach

// ADD images   
if (!empty($_FILES['image']['tmp_name'])) {
    $filePath = __DIR__ . "/assets/images/" . $_FILES['image']['name'];
    
    foreach ($_FILES["image"] as $image) {
        // MIME type check
        if($image['type'] == 'image/jpeg'){
        // Download file
            if (copy($_FILES['image']['tmp_name'], $filePath)) {
                $fileAttach = $filePath;
                $body.='<p><strong>Nuotraukos: </strong>';
                $mail->addAttachment($fileAttach);
            }
        }
    }
}
→ Ссылка