I had this script working, and now it is failing.

var canvas = document.getElementById('CropCanvas');
var CroppedIMG = canvas.toDataURL('image/jpeg', 1.0);
var formData = new FormData();
var xhr = new XMLHttpRequest();
    
formData.append('AJAX_Request', 'ImgUpload');
formData.append('UploadImages', true);
formData.append('ConvertStream', 'image/jpeg');
formData.append('IMGLocation', 'Video');
formData.append('ID', ID);
formData.append('ImagesDir', Folder);
formData.append('ImagesSubDir', SubFolder);

const Image = new File([CroppedIMG], ImageName);

formData.append('Images[]', Image, ImageName);

xhr.open("POST", "AJAX.portal.php", false);

xhr.onreadystatechange = function() {

    if (xhr.status == 200) {

    }

}
xhr.send(formData);

In the console on Firefox it shows an empty payload.

If I comment out the line appending the image to the formData, it will send the payload to the server, cannot figure out why it is not working, as it was working before.

I have tried using the following headers as well (not at the same time):

xhr.setRequestHeader("Content-Type", "application/upload");
xhr.setRequestHeader("Content-Type", "multipart-form/data");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

None of which worked.