How to add header data in XMLHttpRequest when using formdata?
Solution 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);
Solution 2
Use: xmlhttp.setRequestHeader(key, value);
Solution 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()
Rajdeep Siddhapura
Updated on July 08, 2022Comments
-
Rajdeep Siddhapura almost 2 years
I'm trying to implement a file upload API, given here :
Mediafire file UploadI 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);