Файл не загружен на сервер

Question

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

Это js-скрипт для загрузки, когда изображение помещается в тег p

const dropped = e => {
 e.preventDefault();
 const files = e.dataTransfer.files;

if (files.length) {
    let list = '';
    for (let f = 0; f < files.length; f++) {
        list += `The file ${files[f].name} is being uploaded`;
        list += '<br><span><progress value=0 max=100>0%</progress></span>';
    }
    dataBox.innerHTML = list;
    let count = 0;

    const upload = () => {
    // bug files array is empty
        const myfile = files[count];
        const data = new FormData();
        data.append('file', myfile);
        const url = 'fileupload.php';
        //const url = '.php';
        const request = new XMLHttpRequest();
        const xmlupload = request.upload;
         xmlupload.addEventListener('progress', e => {
             if (e.lengthComputable) {
                 let child = count + 1;
                 const per = parseInt(e.loaded / e.total * 100);
                 const progressBar =
                     dataBox.querySelector(`p:nth-child(${child}) > span > 
                     progress`);
                 progressBar.value = per;
                 progressBar.innerHTML = `${per}%`;
             }
         });


        request.addEventListener('load', () => {
            dataBox.innerHTML = 'The image has been uploaded!';
            count++;
            if (count < files.length) upload();
        });
        request.open('POST', url);
        request.send(data);
      };
    upload();
   }
};

PHP:

if (empty($_POST['DATA_filename'])) {
   echo "<script>alert('No files found! Try again.')</script>";
   echo "<script> window.location.assign('Profile.php'); </script>";
   die();
}

move_uploaded_file($_FILES['file']['tmp_name'], 
'/var/www/html/helra/ProjectSolution/uploads/' . $_FILES['file']['name']);
var_dump($_FILES['file']);