Sending Form Data using Ajax and PHP but it shows Undefined Index on the .php file

I’m a bit new to Ajax and HTTP requests and followed some guides to send and save data when I encountered this problem.

I tried sending an object form using ajax through PHP, it shows fine in the preview but when clicking on the actual PHP file it gives me undefined index errors.

On the HTML file preview

When clicked and redirected to the PHP file

JQUERY

jQuery(document).ready(function ($) {

    $('.tui-image-editor-download-btn').on('click', function (e) {

        var blob = dataURLtoBlob(imageEditor.toDataURL());
        console.log(blob);

        var formData = new FormData();
           formData.append('croppedImage', blob,"Image.png");
 
        $.ajax({
            contentType: false, 
            processData: false,
            url: 'upload.php',
            type: 'POST',
            data: formData,
            success: function (data) {
                alert(formData);
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });
        return false;
    });
});

PHP

<?php

  $files = $_FILES['croppedImage'];
 echo '<pre>'; print_r($files); echo '</pre>';
 
 $imageData = file_get_contents($_FILES['croppedImage']['tmp_name']); 
 echo sprintf('<img src="data:image/png;base64,%s" />', base64_encode($imageData));

?>