How to add header data in XMLHttpRequest when using formdata?

Question

I'm trying to implement a file upload API, given here :
Mediafire file Upload

I am successfully able to upload the Post data & Get data, but have no clue how to send the x-filename attribute, which is meant to be Header data as given in API guide.

My Code :

xmlhttp=new XMLHttpRequest();
var formData = new FormData();

formData.append("Filedata", document.getElementById("myFile").files[0]);

var photoId = getCookie("user");
// formData.append("x-filename", photoId);            //tried this but doesn't work
// xmlhttp.setRequestHeader("x-filename", photoId);   //tried this too (gives error) [edited after diodeous' answer]

xmlhttp.onreadystatechange=function()
{
    alert("xhr status : "+xmlhttp.readyState);
}

var url = "http://www.mediafire.com/api/upload/upload.php?"+"session_token="+getCookie("mSession")+"&action_on_duplicate=keep";

xmlhttp.open("POST", url);
// xmlhttp.setRequestHeader("x-filename", photoId);   //tried this too, doesnt work. Infact nothing gets uploaded on mediafire.  [edited after apsillers' answer]
// cant get response due to same origin policy
xmlhttp.send(formData);

It is javascirpt, thus no error texts, script just stops executing, might be it is not allowed — Rajdeep Siddhapura, Oct 29 '13 at 14:53
Just to clarify, you mean there are no errors in your [browser's JavaScript console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers)? — apsillers, Oct 29 '13 at 15:01
@apsillers ohh, I never new abt [Javascript Console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) Error : Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. upload.php:42 uploadAjax upload.php:42 onclick upload.php:130 — Rajdeep Siddhapura, Oct 29 '13 at 15:11
@apsillers line 42 is setrequestheader line & line 130 has a button with onclick attribute that calls the above code — Rajdeep Siddhapura, Oct 29 '13 at 15:15

apsillers · Accepted Answer · 2014-07-18T21:46:49.703

122

Your error

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

appears because you must call setRequestHeader after calling open. Simply move your setRequestHeader line below your open line (but before send):

xmlhttp.open("POST", url);
xmlhttp.setRequestHeader("x-filename", photoId);
xmlhttp.send(formData);

edited Jul 18 '14 at 21:46

answered Oct 29 '13 at 15:15

apsillers

112,806
17
235
239

Got rid of error but, still not working.. Actually cant get response from mediafire due to same origin policy. Dunno what the problem is, could u plz check the [Mediafire API](http://developers.mediafire.com/index.php/REST_API#upload) & let me knw what the problem is, file was successfully uploaded to mediafire without this edit, now nothing is uploaded! – Rajdeep Siddhapura Oct 29 '13 at 16:17
without that line file was being uploaded, but with default name! – Rajdeep Siddhapura Oct 29 '13 at 16:19
4

that clears things up a bit. See [Understanding XMLHttpRequest over CORS](http://stackoverflow.com/questions/13400594/understanding-xmlhttprequest-over-cors-responsetext/13400954#13400954). The same-origin policy allows "simple" requests to reach the client, and then decides if the client can read the results. "Non-simple" requests are verified with a "preflight" request before sending the actual request. Adding a non-simple header changed your request from simple to non-simple. In both cases, I assume you couldn't read the response from the server? – apsillers Oct 29 '13 at 16:21
or for workaround can i change the name of uploaded file before sending it to mediafire?? Then i wont need to send extra parameter. – Rajdeep Siddhapura Oct 29 '13 at 16:22
ohh good to know that adding headers makes the request non-simple. Thanks for help :) – Rajdeep Siddhapura Oct 29 '13 at 16:24

score 38 · Answer 2 · answered Oct 29 '13 at 14:40

38

Use: xmlhttp.setRequestHeader(key, value);

answered Oct 29 '13 at 14:40

Diodeus - James MacFarlane

112,730
33
157
176

1

I tried this too, javascript stops executing after this statement, doesnt work! (Will add this to my question) – Rajdeep Siddhapura Oct 29 '13 at 14:45

score 2 · Answer 3 · answered Jan 16 '18 at 23:13

Check to see if the key-value pair is actually showing up in the request:

In Chrome, found somewhere like: F12: Developer Tools > Network Tab > Whatever request you have sent > "view source" under Response Headers

Depending on your testing workflow, if whatever pair you added isn't there, you may just need to clear your browser cache. To verify that your browser is using your most up-to-date code, you can check the page's sources, in Chrome this is found somewhere like: F12: Developer Tools > Sources Tab > YourJavascriptSrc.js and check your code.

But as other answers have said:

xhttp.setRequestHeader(key, value);

should add a key-value pair to your request header, just make sure to place it after your open() and before your send()

How to add header data in XMLHttpRequest when using formdata?

3 Answers3