PHP / Javascript / AJAX загрузка файла с помощью перетаскивания. Файлы конвертируются в строки

Question

У меня проблема при загрузке файлов с использованием области перетаскивания. Похоже, что файлы преобразуются в строки, когда они поступают на сервер. Я добавляю файловые объекты в новый массив, потому что я хочу, чтобы пользователи могли удалять ненужные файлы перед отправкой формы.

Форма выглядит следующим образом:

<form action="" class="dropzone" id="image_upload" enctype="multipart/form-data">

    <div class="upload-input">
        <label for="delivery_address" id="delivery_address_label">Delivery address</label>
        <input type="text" name="delivery_address" id="delivery_address" class="form-control" />
    </div>

    <div class="" id="drop-area">
        <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed
           region
        </p>
    </div>

    <div class="upload-input">
        <input class="btn btn-info w-100" type="submit" id="btnUpload" value="Send" />
    </div>

</form>

Javascript:

let dropArea = document.getElementById("drop-area");

let fileList = [];

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults(e) {
    e.preventDefault()
    e.stopPropagation()
}

dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
    let dt = e.dataTransfer;
    let files = dt.files;

    handleFiles(files);
}

function handleFiles(files) {
    files = [...files];
    files.forEach(addFiles);
}

function addFiles(file) {

    fileList.push(file);
}

btnUpload.addEventListener("click", function(evt) {
    evt.preventDefault();

    const xhr = new XMLHttpRequest();
    const form = document.getElementById("image_upload");
    const formData = new FormData(form);

    console.log(fileList);

    formData.append("fileList", fileList);

    xhr.open("POST", "add.php");

    xhr.onreadystatechange = function() {
        document.getElementById("phpResponse").innerHTML = this.responseText;
    };

    xhr.send(formData);
});

И в файле PHP я просто покажу переменную $ _FILES, чтобы посмотреть, что происходит:

var_dump($_FILES);

, которая возвращает

array (0) {}

var_dump ($ _ POST) возвращает:

array (3) {["delivery_type"] => строка (14) "Latvijas pasts" ["delivery_address"] => string (6) "qweeqe" ["fileList"] => string (27) "[объектный файл], [объектный файл]"}

Я не могу найти, где проблема. Форма установлена ​​в enctype = "multipart / form-data". Перед отправкой формы я console.log переменная fileList и похоже, что файлы все еще файлы:

Answer 1

Как и предполагалось, мне нужно l oop через каждый экземпляр File в массиве fileList и добавлять каждый File к FormData индивидуально.

Эта часть:

formData.append("fileList", fileList);;

Становится:

for (let i = 0; i < fileList.length; i++) {
    formData.append("fileList[]", fileList[i]);
}

А на бэкэнде я могу l oop через каждый файл:

foreach($_FILES['fileList']['tmp_name'] as $key => $tmp_name){
    echo $_FILES['fileList']['name'][$key] . "<br />";
}