Getting 400 (Bad Request) when trying to post a Blob in FormData to php from ajax (Wordpress Plugin)

Question

so please take a look at the code below.

        const chunk = file.slice(start,start + chunkSize + 1)
        const fd = new FormData()
        fd.append('data', chunk)
        $.ajax({
            type: 'POST',
            //cache: false,
            //contentType: false,
            //processData: false,
            url: ajax_object.ajaxurl,
            data:{
                action:'uploadChunk',
                //chunk: fd
            },
            success: function(response){
                console.log(response)
            }
        })

When I leave these comments in, the code returns with its intended response... But when I remove the comments so that I can actually send the FormData with the request, I get a 400 (bad request) error. All I'm doing on the backend for now is echoing back a string. That's it. And that works unless I try to send the formData along with it.

Any and all insight you can provide is helpful and I appreciate it greatly. Thank you~

Answer 1

When you're using a FormData object in ajax you pass that object alone to the ajax function. If you have to pass any other data use append.

    const chunk = file.slice(start,start + chunkSize + 1)
    const fd = new FormData()
    fd.append('data', chunk)
    fd.append('action', 'uploadChunk')
    $.ajax({
        type: 'POST',
        //cache: false,
        contentType: false,
        processData: false,
        url: ajax_object.ajaxurl,
        data: fd,
        success: function(response){
            console.log(response)
        }
    })

Answer 2

pass the form data variable as data:

 const chunk = file.slice(start,start + chunkSize + 1)
 const fd = new FormData()
 fd.append('data', chunk)

   dataType: "json",
   data:{
         data:fd 
       },