Ajax XMLHttpRequest.Upload returning null and "progress" eventListener not working even though the file has been uploaded

To learn more JavaScript and PHP, I am currently working on a small private project that allows me to upload single or multiple files to my server via PHP. The file/s get sent to the PHP script via Ajax. If I upload several files, I send one file after the other in a loop via Ajax to the PHP script. Since I wanted to make the visual part of the upload a bit more appealing, I added a progress bar via xhr.upload and a "progress" eventlistener, which worked well until a while ago.

However, after uploading a file for the first time in a while, I noticed that the progress bar no longer works. In the meantime, the code around the function has of course been extended, but the function itself has remained the same. Furthermore, uploading the file(s) to the server works perfectly and I get no errors.

After a few console outputs, it quickly became clear that the xhr.upload function only returns "null" values (see screenshot below). I guess that the "progress" eventlistener not firing is also due to this?

Console output of XMLHttpRequest after upload

Im working with php 8.0.8 and i am using MAMP as my localhost. I tested in Chrome and Safari.

This is my JavaScript function with which I send the files via Ajax to my upload.php:

let percentComplete = [];
let xhr = [];
let j = 0;

function uploadFiles() {
    text.innerHTML = "Sendet ...";
    
    $("#mssgBox").css({ 'display': 'block', 'bottom': '0' });

    let formData = new FormData();
    formData.append('file[]', fileListArr[j]);
    let progressbarID = $(".progressbar_" + id[j]);
    $.ajax({
        url: "../upload.php",
        type: "POST",
        xhr: function () {
            xhr[j] = new XMLHttpRequest();
            console.log(xhr[j]);
            xhr[j].upload.addEventListener("progress", function (e) {
                console.log(e.loaded + ' & ' + e.total + ' & ' + Math.floor((e.loaded / e.total) * 100));
                progressbarID.css({ "width": Math.floor((e.loaded / e.total) * 100) + '%' });
                //notifyMe('Uploading', Math.floor((e.loaded / e.total) * 100));
            }, false);
            return xhr[j];
        },
        error: function (error) {
            text.innerHTML += '<br/>Error: ' + error;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    }).done(function (respond) {
        text.textContent = '';
        text.innerHTML += respond + '<br/>';
        console.log(respond);
        notifyMe(respond, '100');

        j = j + 1;
        if (j < fileListArr.length) {
            uploadFiles();
        } else {
            j = 0;
        }

        $("#uploadedFiles").load("filesuploaded.php");
    });
}

My upload.php:

<?php
session_start();
include('assets/imgResize.php');
$total_count = count($_FILES['file']['name']);

$phpFileUploadErrors = array(
  0 => 'ACHTUNG: There is no error, the file uploaded with success',
  1 => 'ACHTUNG: The uploaded file exceeds the upload_max_filesize directive in php.ini',
  2 => 'ACHTUNG: The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
  3 => 'ACHTUNG: The uploaded file was only partially uploaded',
  4 => 'ACHTUNG: No file was uploaded',
  6 => 'ACHTUNG: Missing a temporary folder',
  7 => 'ACHTUNG: Failed to write file to disk.',
  8 => 'ACHTUNG: A PHP extension stopped the file upload.',
);

for ($i = 0; $i < $total_count; $i++) {
  if ($_FILES["file"]["error"][$i] > 0) {
    $errorCode = $_FILES["file"]["error"][$i];
    echo $phpFileUploadErrors[$errorCode];
  } else {
    if (file_exists("upload/" . $_SESSION['userUid'] . '/' . str_replace(' ', '_', $_FILES["file"]["name"][$i]))) {

      echo "ACHTUNG: " . $_FILES["file"]["name"][$i] . " existiert bereits.<br/>";

    } else {

      if (imageType($_FILES["file"]['tmp_name'][$i])) {
        $image = scaleImageFileToBlob($_FILES['file']['tmp_name'][$i], 'thumb_' . $_SESSION['userUid'] . '_' . str_replace(' ', '_', $_FILES["file"]["name"][$i]));
        if ($image == '') {
          echo 'ACHTUNG: Image type not supported';
        }

      }

      $uploadFile = move_uploaded_file($_FILES["file"]["tmp_name"][$i], "upload/" . $_SESSION['userUid'] . '/' . str_replace(' ', '_', $_FILES["file"]["name"][$i]));
      if ($uploadFile) {
        echo $_FILES["file"]["name"][$i] . " erfolgreich hochgeladen";
      } else {
        echo "ACHTUNG: Fehler beim hochgeladen von " . $_FILES["file"]["name"][$i];
      }
    }
  }
}
?>

Can someone tell me for what reason I only get null values for my xhr.upload?

Also if you need more information, I will give them to you.

Thanks in advance :)

P.S. I can imagine that doing multiple ajax requests in a loop like I did is probably not optimal but it's the only way I managed to get one progressbar per uploaded file.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/avVxGoY