AJAX error: "No multipart boundary param in Content-Type"

Question

I am trying to upload a file from localhost to a server but I am getting the following error in my network console, with status code 500:

no multipart boundary param in Content-Type

I have enabled cors on my nginx reverse proxy. My AJAX request is like this:

var files = document.getElementById('candidatePhoto').files;
if (!files.length) {
  return alert('Please choose a file to upload first.');
}
var file = files[0];

var form = new FormData();
form.append("files", file);

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://example.com",
  "method": "POST",
  "headers": {
    "Content-Type": "multipart/form-data"
  },
  "processData": false,
  "contentType": false,
  "data": form,
  success: function(data) {
    console.log("Success", data);
    addPhoto(data);
  },
  error: function(err) {
    console.log("Error", err);
    alert("Error: " + err);
  }
}

My HTML form also has enctype='multipart/form-data'

Answer 1

If you set contentType: false jQuery will automatically apply the correct Content-Type header for sending multipart data. Your inclusion of a header object explicitly specifying the content type is breaking this behaviour. It needs to be removed. Change your AJAX request settings to this:

var settings = {
  async: true,
  crossDomain: true,
  url: "http://example.com",
  method: "POST",
  processData: false,
  contentType: false,
  data: form,
  success: function(data){
    console.log("Success", data);
    addPhoto(data);
  },
  error: function(err) { 
    console.log("Error", err);
    alert("Error: " + err);
  }
}