Posting files

We are building a single-page application. One of the characteristics of such applications is that all the operations happen without a page reload. Uploading files without changing the page was always tricky. In the past, we used solutions that involved hidden iframes or small Flash applications. Thankfully, when HTML5 arrived, it introduced the FormData interface.

The popular Ajax is possible because of the XMLHttpRequest object. Back in 2005, Jesse James Garrett coined the term "Ajax", and we started using it to make HTTP requests within JavaScript. It became easy to perform the GET or POST requests in the following way:

var http = new XMLHttpRequest();
var url = "/api/content";
var params = "text=message&author=name";
http.open("POST", url, true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {
  if(http...