I have written a jQuery function using jsPDF to convert a form to PDF, I have then added an ajax command with the intention of saving the generated PDF to the server.

However, when I click submit, the page appears to be completing an action. but, when I look at console I see:

PDFSubmit Clicked

Then

jquery-3.4.1.js:9837 POST .php 400

When I check Network and check admin-ajax.php, I see, at the bottom -

>Request Payload [object object]

My code:

PHP:

add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload_callback' );
function so56917978_upload_callback() {
    if ( ! empty( $_POST['data'] ) ) {
        $data = base64_decode($_POST['data']);
        file_put_contents( get_stylesheet_directory_uri() . '/POD/pod.pdf' , $data );
        echo "success";
    } else {
        echo "No Data Sent";
    }

    die();
}

JS

function sendToServer() { 
            html2canvas(document.getElementById("product_sheet"), {
                onrendered: function(canvas){
                    console.log("#pdfsubmit clicked");

                    var img = canvas.toDataURL("image/png");
                    var doc = new jsPDF('p', 'pt', 'a4' );
                    doc.addImage(img, 'JPEG', 20, 20);

                    var pdf = doc.output('blob');
                    $.ajax({
                        url: jspod.ajax_url,
                        type: 'POST',
                        processData: false,
                        data:{
                            data: pdf,
                            action:"so56917978_upload",
                        },
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                    });
                }
            });
        }

I have also tried dataType:'text' and contentType:'false'

Any help with figuring out where I am going wrong would be great