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);

Cymene

Could you give us the error text for setRequestHeader? – Ciaracibber

It is javascirpt, thus no error texts, script just stops executing, might be it is not allowed – Cymene

Just to clarify, you mean there are no errors in your browser's JavaScript console? – Ciaracibber

@Ciaracibber ohh, I never new abt Javascript Console 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 – Cymene

@Ciaracibber line 42 is setrequestheader line & line 130 has a button with onclick attribute that calls the above code – Cymene

Answer 1

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);

Ciaracibber

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 & let me knw what the problem is, file was successfully uploaded to mediafire without this edit, now nothing is uploaded! – Cymene

without that line file was being uploaded, but with default name! – Cymene

that clears things up a bit. See Understanding XMLHttpRequest over CORS. 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? – Ciaracibber

or for workaround can i change the name of uploaded file before sending it to mediafire?? Then i wont need to send extra parameter. – Cymene

ohh good to know that adding headers makes the request non-simple. Thanks for help :) – Cymene

Answer 2

Use: xmlhttp.setRequestHeader(key, value);

Rinker

I tried this too, javascript stops executing after this statement, doesnt work! (Will add this to my question) – Cymene

Answer 3

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()

Remount