jquery - Cant use admin-ajax.php to upload image - 400 bad request

I have tried very many things but nothing worked for me. I am trying to upload image created by imageMaker using ajax in wordpress.

.php

<?php
/*
Plugin Name: Sizer
Description: Sizer
Version:     1.00
*/

function upload_file_callback(){
    if (isset($_POST['upload_file_callback'])){
        echo'ok';
    }
    else{
        echo 'bad';
    }
}
add_action('wp_ajax_nopriv_upload_file', 'upload_file_callback');
add_action( 'wp_ajax_upload_file', 'upload_file_callback' );
Copy code

And part of the JS code:

  onGenerate: function(data, formData){  
             var ajax_url = 'https://bespokelazienki.pl/wp-admin/admin-ajax.php';
             
             var image = new Image();
             image.src = data["amm_canvas"];
             image.name = "123.png";
             
                var q = '<?php echo wp_create_nonce('uploadingFile'); ?>';
                 
                var fd = new FormData();
                fd.append("security", q);
                fd.append("file",dataURLtoFile(data["amm_canvas"], 'filename.png'));
                fd.append("action", "upload_file_callback");

                for (var pair of fd.entries()) {
                    console.log(pair[0]+ ', ' + pair[1]); 
                }
             
                $.ajax({
                url:ajax_url,
                type:"POST",
                processData: false,
                contentType: false,
                enctype: "multipart/form-data",
                data:  fd,
                success : function( response ){
                    var returnedData = JSON.parse(response);
                    if(returnedData.code == 200){
                        alert('File uploaded!');
                    }else{
                        alert(returnedData.msg);
                    }                                                                               
                },
Copy code

I am using this [example code from github] for imageMaker

After click a button in console its "bad requests": [1]: https://i.stack.imgur.com/2TZqu.png

I tried also:

• with only 2 fields (image + action hook name)
• image as a Image class
• image as base64 code

Any idea? I think upload_file_callback is not used at all. Testing demo: https://bespokelazienki.pl/41736-2/

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.