POST /wp-admin/admin-ajax.php 400 (bad request)

Question

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:

POST website.com/wp-admin/admin-ajax.php 400 (bad request)

and I cannot figure out where my code has went wrong.

I have registered my JS and used wp_localize in functions.php:

function ASAP_scripts() {
wp_register_script('js-pod', get_stylesheet_directory_uri() . '/js/POD.js', array('jquery'),'1.1', true);
wp_enqueue_script('js-pod');
wp_localize_script( 'js-pod', 'jspod',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_enqueue_scripts', 'ASAP_scripts' );  

I have also added my ajax commands again in functions.php

add_action( 'wp_ajax_my_ajax_request', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_request', '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;
}

My jQuery:

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

          var img = canvas.toDataURL("image/png");
          var doc = new jsPDF('p', 'pt', 'a4');
          doc.addImage(img, 'JPEG',20,20);
          var file = doc.output('blob');
          var pdf = new FormData();     // To carry on your data  
          pdf.append('mypdf',file);

          $.ajax({
            url: '/wp-admin/admin-ajax.php',   //here is also a problem, depends on your 
            data: {
              action: 'so56917978_upload', // Action name.
              data: pdf,
            },
            dataType: 'text',
            processData: false,
            contentType: false,
            type: 'POST',
          }).done(function(data){
            console.log(data);
          });
            }
          });
          }

Any help in solving this would be great. I have seen similar questions on here but I feel as though I have covered all the bases which they discuss and genuinely cannot see my issue

Update...

Update...

I have changed MY JS slightly, it seems to work better and more as expected, however, I am still getting `no data sent. So the ajax request seems to be working. but, it appears that there may be something in the PHP which is stopping it from completing?

JS

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

                function html() {
                    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',
                        async: false,
                        contentType: 'application/json; charset=utf-8',
                        data:{
                            data: pdf
                            action:'so56917978_upload'
                        },
                        dataType: 'json'
                    });
                }
            });
        }
    }

PHP:

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

    die();
}

Answer 1

just change you action hooks with the name which you have used in ajax request action: 'so56917978_upload'

add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload' );

also it will be good if you use localize variable instead of hard coding the url in ajax url: '/wp-admin/admin-ajax.php' although it has nothing to do with your problem but its good practice.

EDIT -

you also need to append action in FormData and then in ajax you need to pass that pdf object in data object so basically your code will look like this

pdf.append('action', 'so56917978_upload');

$.ajax({
    url: jspod.ajax_url,   //here is also a problem, depends on your 
    data: pdf,
    dataType: 'text',
    processData: false,
    contentType: false,
    type: 'POST',
}).done(function (data) {
    console.log(data);
});

where pdf.append('action', 'so56917978_upload'); will append the action in your FormData object. data: pdf, and this field in ajax will hold you pdf data object.

Answer 2

You have few errors in the code.

1. In the JS code, url needs to be jspod.ajax_url. Also, the action needs to be my_ajax_request.

2. Not sure why you have double quotes in file_put_contents function. Also you might want to use get_template_directory function to get the path rather than URI?

Hope it helps.