Drag and drop fileList

Я пытаюсь перетащить файлы для отправки, но файлы, которые я перетаскиваю, не отображаются в fileList, они хранятся в массиве File, и когда я отправляю их на сервер, отправляются только файлы, расположенные в fileList.

html

                     <div id="drop-area">
                        <input type="file" id="fileElem" name="fileElem[]" onchange="handleFiles(this.files)" multiple="multiple">
                        <label class="button" for="fileElem">Select File</label>
                        <div id="gallery"></div>
                        <button type="button" class="button" onclick="resetFile()">Delete File</button>
                    </div>

js

let imagesForUpload = [];

const types = ['image/jpeg', 'image/png', 'application/pdf', 'application/zip', 'application/x-rar-compressed', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']

let dragAndDrop = document.querySelector('#drop-area'),
    imagesList = document.querySelector('#gallery')

dragAndDrop.addEventListener('dragenter', (e) => {
    e.preventDefault()
})
dragAndDrop.addEventListener('dragleave', (e) => {
    e.preventDefault()
})
dragAndDrop.addEventListener('dragover', (e) => {
    e.preventDefault()
})

dragAndDrop.addEventListener('drop', (e) => {
    e.preventDefault()
    const files = e.dataTransfer.files
    for (let key in files) {
        if (!types.includes(files[key].type)) {
            continue;
        }
        imagesForUpload.push(files[key])
        let imageTmpUrl = URL.createObjectURL(files[key])
        imagesList.innerHTML += `<img src="${imageTmpUrl}" class="images-list-picture" alt="">`
    }

})

function handleFiles(files) {
  files = [...files]
  files.forEach(getFilesFormData)
  files.forEach(previewFile)
}

function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let div = document.createElement('div');
    div.setAttribute('class', 'galleryimg');
    div.setAttribute('id', 'galleryimg');
    div.src = reader.result;
    document.getElementById('gallery').appendChild(div);
    let img = document.createElement('img');
    img.src = reader.result;
    document.getElementById('galleryimg').appendChild(img);
  }
}

function getFilesFormData(files) {
    const formData = new FormData();

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

    return formData;
}

php для отправки на сервер

            $target_dir = "uploads/";
            foreach ($_FILES["fileElem"]["name"] as $key => $value) {
            $fileName =  basename($_FILES["fileElem"]["name"] [$key]);
            $target_file = $target_dir . date("Ymd\_His") .'_' . $fileName ;
            if (move_uploaded_file($_FILES["fileElem"]["tmp_name"] [$key], $target_file)) {
                    # save file location in database
                    $sql = "insert into `fileattachment` (gileid,filepath,filename,filetype) values (?,?,?,null);";
                    if ($insert_stmt = $this->mysqli->prepare($sql)) {
                        $insert_stmt->bind_param('iss',$this->id,$target_file,$fileName);
                        if (! $insert_stmt->execute()) {
                            return false;
                        }
                    }
        } else {
            echo "<br>NoFile";
        }

        }