formData is empty (while uploading it through XMLHttpRequest - pure javascript)

Question

I need to send along with my variable data also a blob file, so i needed to switch from POST plain

 http1.send("var1=" + var1 + "&var2=" + var2 + "")

to formData.

But formData is totally empty, even when I output it to the console. Here's my code.

var formData = new FormData();
formData.append("customer_id", customer_id)
formData.append("nume", btoa(nume))
formData.append("prenume", btoa(prenume))
formData.append("signature", blob, "signature.jpg");
.....

var phpscript = 'AJAX/ajax_save_form.php'
http1.open('POST', phpscript)
http1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http1.onreadystatechange = function()
{
    if(http1.readyState == 4)
    {
        if(http1.status == 200)
        {
            var ajaxMessage = http1.responseText    
            alert(ajaxMessage)

        } 
    }
}
http1.send(formData);

console.log(formData);

Here are some typical values for my variables :

customer_id = 4
nume = 'Bill'
prenume = 'Gates'
blob = .jpeg file

Can anyone track this for me ? Where am I wrong ? I browsed the net for 20 different solutions and pages, and none can solve my problem.

Thanks !!!

Hi Adrian. It'll be kinda hard to help with this one unless we can see the values you are using for the form, like what customer_id is and where you are logging formData — Katie.Sun
– Katie.Sun, Commented Nov 27, 2018 at 19:00
I added what you requested....but I found my answer. Needed to remove the "setRequestHeader" alltogether ! :) cheers — Adrian Tanase
– Adrian Tanase, Commented Nov 27, 2018 at 19:05

Musa · Accepted Answer · 2018-11-27 19:01:14Z

2

The FormData object needs to be sent as multipart/form-data, you set the content type as application/x-www-form-urlencoded.
Remove the call to setRequestHeader and the correct content type will be set.

answered Nov 27, 2018 at 19:01

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrian Tanase Over a year ago

thank you ! this solved my problem ! million thanks :) I was trying to change the "content-type" but removing the "setRequestHeader" all together did the trick ! million thanks @Musa !

Musa Over a year ago

You can't set the proper content type because you would not know what to put as the boundary

Collectives™ on Stack Overflow

formData is empty (while uploading it through XMLHttpRequest - pure javascript)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related