title: AJAX: Asynchronously posting a file to a server
body: <p>I want to post a file to server asynchronously without posting the form. I have the following code:</p>
  
  <pre><code>var fileInput = document.getElementById('FileInput');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file, file.name);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://servername/controllername/AnalyseFile', true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.send(formData);
  </code></pre>
  
  <p>However, when the method is executed on the server, the post body contains no files. The following is from ASP.NET MVC4:</p>
  
  <pre><code>[HttpPost]
  public JsonResult AnalyseFile()
  {
    int filesCount = Request.Files.Count;
    if(filesCount == 0) { throw new Exception('no files...'); }
    // do stuff
  }
  </code></pre>
  
  <p>The Files collection contains no files and I can't figure out why. Any help appreciated.</p>