WordPress Ajax 400 Bad Request

Question

I have been through 21 different posts on this site and many others on google, currently on page 13 and i'm actually about to cry. I am a junior developer and I am really struggling to get this to work. For some reason I can't seem to grasp it.

I am trying to create a plugin that will allow me to upload a blob file to WordPress media library and it's failing miserably.

The plugin structure is like so:

ajax_test/
-- ajax_test.php

-- assets/
-- -- js/
-- -- -- uploader.js

In a file called uploader.js I have this code:

mediaRecorder.addEventListener('stop', function() {
    audio.src = URL.createObjectURL(new Blob(recordedChunks));
    downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
    downloadLink.download = 'file' + Date.now() + '.wav';
    downloadLink.classList.remove('hide');

    var blob = new Blob(recordedChunks);
    var fd = new FormData();
    fd.append('fname', 'test.wav');
    //fd.append('data', event.target.result);
    fd.append('file', blob);
    fd.append('action', 'send_message');

    console.log('about to ajax');
    
    $.ajax({
            url: ibenicUploader.ajax_url,
            type: 'POST',
            data: fd,
            cache: false,
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function(data, textStatus, jqXHR) {  
    
                if( data.response == "SUCCESS" ){
                
                    console.log('success');
                
                } else {
                    console.log('error');
                }
            }
        });

        console.log('after ajax');

});

And in the ajax_test.php file I have this code:

function ibenic_enqueue() {
wp_enqueue_script( 'ibenic-uploader', plugins_url( 'assets/js/uploader.js', __FILE__  ), array('jquery'), '1.0', true );
wp_localize_script( 'ibenic-uploader', 'ibenicUploader',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'ibenic_enqueue' );

In the console I get

about to ajax

after the ajax

/wp-admin/admin-ajax.php 400 (Bad Request)

Even if I change ibenicUploader.ajax_url, to a full path I get the same error.

Please can someone help me upload this file to wordpress

Answer 1

You will have to logged in to it work as wp_ajax works with logged in user.

add_action("wp_ajax_your_fn", "your_fn");

For visitor use wp_ajax_nopriv

 add_action("wp_ajax_nopriv_your_fn", "your_fn");