How to set boundary while using XmlHttpRequest and FormData

Question

I am trying to set the boundary correctly in the header while using FormData to post the XmlHttpRequest:

xhr.open("POST",url);
xhr.setRequestHeader("Content-type","multipart/form-data; boundary=...");

var formData = new FormData();
formData.append("filename", inputId.files[0]);
formData.append(...);

xhr.send(formData);

How do I get the boundary to be set in the request header here. I saw the request being set, the boundary is somehow created in the request. But the server has no idea on how to interpret it.

Answer 1

ES method

Simply don't set the Content-Type header manually and the browser will automatically set "multipart/form-data; boundary=..." value.

---

jQuery method

If you're using jQuery, set contentType option to false:

$.ajax({
    url: url,
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false
});

Answer 2

Try looking at this, How to send multipart/form-data form content by ajax (no jquery)? I am trying to work with this script with PHP as the reciever, having some problems with mixed results of warnings and I think my problem is that I have hacked away at the scripts both ends too much that its no longer functioning.

As for the comment by the other poster "If you're using JQuery", the only thing I have to say to that comment is that it is not helpful to the person not working in JQuery and JQ is not the be all and end all of scripts.