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