AJAX file upload request will not end [closed]

I am trying to upload an image to the server but the request will not end. In DevTools, the request shows as pending while, in the backend, php is continuously writing to an ever growing file until I have to restart Apache in order to stop the request.

I am using CodeIgniter on the backend to handle uploads. The exact same code used in other parts of my code works just fine.

This is the request code. The event is attached to a file input field:

$("body").on("change", "#product-image", function(e) {
    if ($.inArray($(this).val().split('.').pop().toLowerCase(), allowedExt) == -1) {
        alert("JPG JPEG PNG only");
        $(this).val(null);
    } else {
        var formData = new FormData();
        var file = $(this)[0].files[0];
        formData.append("Image", file);
        formData.append("ProductID", <?= $ProductID; ?>);
        $.ajax({
            url: "/rest/private/product/image/upload",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function(response) {
                var resp = JSON.parse(response);
                if (resp.Status == 1) {
                    var url = resp.Data.URL;
                    var order = resp.Data.Order;
                    var ID = resp.Data.ID;
                    self.showPreview("<?= base_url() ?>" + url, order, ID);
                } else {
                    self.errorToast(resp.Error.Image);
                }
            },
            error: function(resp) {
                self.errorToast("Error");
            },
        });
    }
});

This is the code that handles the upload:

$Image = $this->request->getFile("Image");


$maxW = "5000";
$maxH = "5000";
$maxSize = 4;
$validationRule = [
    "Image" => [
        'label' => 'Your Image',
        'rules' => [
            'uploaded[Image]',
            'is_image[Image]',
            'mime_in[Image,image/jpg,image/jpeg,image/gif,image/png,image/webp,image/bmp,image/tiff]',
            'max_size[Image,' . $maxSize * 1024 . ']',
            'max_dims[Image,' . $maxW . "," . $maxH . ']',
        ],
        'errors' => [
            'max_dims' => '{field} is bigger than (' . $maxW . "x" . $maxH . ')',
            'max_size' => '{field} is bigger than ' . $maxSize . 'MB',
        ],
    ],
];

if (!$this->validateData(["Image" => $Image], $validationRule)) {
    $this->resp["Status"] = 0;
    $this->resp["Error"] = $this->validator->getErrors();
    return;
}

if ($Image->isValid() && !$Image->hasMoved()) {
    $imageName = $Image->getRandomName();
    $Image->move(ROOTPATH . 'public/uploads/product/', $imageName);
}

Validation works fine. When the code gets to the last line, it just won't stop writing. The file being uploaded into the product file just gets bigger and bigger. I am stumped.

Here are the request headers show in DevTools:

accept
*/*
accept-encoding
gzip, deflate
accept-language
en-US,en;q=0.9
connection
keep-alive
content-length
2654
content-type
multipart/form-data; boundary=----WebKitFormBoundarytNw7RBAAwBNUVCzh
cookie
debug-bar-theme=dark; debug-bar-position=bottom; web_session=doohnklgajb7g24mm4k036juj7jc0fd8; debug-bar-state=minimized
dnt
1
host
test.local
origin
http://test.local
referer
http://test.local/p/edit/46
user-agent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
x-requested-with
XMLHttpRequest

This particular file I tried uploading is only 2.3KB.

Payload in DevTools:

------WebKitFormBoundarytNw7RBAAwBNUVCzh
Content-Disposition: form-data; name="Image"; filename="download (1).jpg"
Content-Type: image/jpeg


------WebKitFormBoundarytNw7RBAAwBNUVCzh
Content-Disposition: form-data; name="ProductID"

46
------WebKitFormBoundarytNw7RBAAwBNUVCzh--

Tried changing contentType in the request to multipart/form-data explicitly and the request finishes but no file was uploaded.