使用XMLHttpRequest上传的文件不在$ _FILES数组中

I am trying to upload a file to my PHP Slim web application using native javascript and XMLHttpRequest. This is the code I have:

var formdata = new FormData();
  var xhr      = new XMLHttpRequest();
  xhr.open('POST', '/foo/bar', true);

  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.setRequestHeader('X-File-Name', file.name);
  xhr.setRequestHeader('X-File-Size', file.size);
  xhr.setRequestHeader('X-File-Type', file.type);

  formdata.append("thefile", file);

  xhr.upload.addEventListener('progress', function (e) {
    if (e.lengthComputable) {
      console.log((e.loaded / e.total) * 100);
    }
  }, false);

  return xhr.send(formdata);

According to the dev tools, the request is populated and sent correctly:

But at the other end the $_FILES array is empty.

If I replace the javascript handling with a basic HTTP form POST, then the file IS visible in the $_FILES array. So clearly the issue lies with my javascript code, or something about the javascript upload that the server does not like.

Does anyone see any issue with my javascript code or has experienced any issues like this before?

Thanks!