Sending to server using Ajax is giving /admin-ajax.php 400 error

would the likes of:

var xhr = new XMLHttpRequest();
xhr.open( ‘post’, ‘ajax-php-link’, true ); 
xhr.send(data);

Work better?

• This reply was modified 6 years, 9 months ago by Supplement Genie.

@bcworkz
To be honest, all this is new to me. I am currently studying software development but have done a lot more on Python than JS.

The code I have sued has been adapted from what I have found online so when It comes to modifying code of this sort, I struggle.

As far as I can find, the [object object] is returned because the PHP cannot figure out what I have sent, so it is receiving something, but it cannot decode.

Thank you for your help getting over the 400 error. I will need to put a lot of research into this to figure out how to fix it

@bcworkz
I have amended my code slightly (only the JS, PHP is the same as initial question)
I was wondering if you could see anything that could help me figure this out.

I have changed the JS to:

function make_product_sheet() {

          console.log("#pdfsubmit clicked");
          var pdf = new jsPDF('p', 'pt', 'a4');

          pdf.addHTML(document.getElementById("product_sheet"), function() {

              ps_filename = "generated-product-sheet";
              var file = btoa(pdf.output());

              var formData = new FormData();
              formData.append('data', file);

              $.ajax({
                url: jspod.ajax_url+'?action=so56917978_upload',
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data){
                    alert(data);
                }
            });
          });
      }

I now get the Message Success Got There

I cannot see the file in the designated folder though.

when I inspect element and chose the network tab and select admin-ajax.php and scroll to the bottom I see formData – data:… and it is comprised of what looks to be a base64 string of random letters and numbers

ie.

formData
data: JVBERi0xLjMKJbrfrOAKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQovQ29udGVudHMgNCAwIFIKPj4KZW5kb2JqCjQgMCBvYmoKPDwKL0xlbmd0aCA1Mgo Pgp……….

My understanding is that the PHP above should decode this and place it into the relevant folder?

@bcworkz

I solved my problem with…

PHP:

add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload_callback' );
function so56917978_upload_callback() {
    $res = [
        'saved' => 0,
    ];

    if ( ! empty( $_POST['data'] ) ) {
        $pdf = get_stylesheet_directory() . '/POD/pod.pdf';
        $data = base64_decode($_POST['data']);
        file_put_contents( $pdf, $data );
        $res['pdf'] = $pdf;
        $res['saved'] = 1;
    } else{
        $res['error'] = 'No Data Sent'; 
    }
    wp_send_json( $res );
}

jQuery

jQuery( "#pdfsubmit" ).click(function() {
	var $form = $("form[name='pdf-download']"),
		$successMsg = $(".alert");
	$.validator.addMethod("letters", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
    });
	$form.validate({    
		rules: {
			firstname: {
				required: true,
				minlength: 3,
				letters: true
            },
            lastname: {
				required: true,
				minlength: 3,
				letters: true
			},
			email_id: {
				required: true,
				email: true
			}
		},
		messagess: {
            firstname: "Please specify your first name (only letters and spaces are allowed)",
            lastname: "Please specify your last name (only letters and spaces are allowed)",
			email_id: "Please specify a valid email address"
		},
        submitHandler: function sendToServer() {

            console.log("#pdfsubmit clicked");
            var pdf = new jsPDF('p', 'pt', 'a4');

            pdf.addHTML(document.getElementById("product_sheet"), function() {

                var file = btoa(pdf.output());

                var formData = new FormData();
                formData.append('data', file);

                $.ajax({
                    url: jspod.ajax_url + '?action=so56917978_upload',
                    data: formData,
                    processData: false,
                    contentType: false,
                    debug:true,
                    type: 'POST',
                    success: function(data) {
                        alert(data);
                    }
                });
            });
        }
    });
});

Thats the complete code with form verification as well.

thank you for the help you gave 🙂 I got there lol