Ajax upload with XMLHttpRequest level 2 and the File API

Posted on November 17, 2010 by Phil 30 comments

I’ve put together a micro Ajax library for the XMLHttpRequest level 2 spec. You can go check it out on Github or read the related article XMLHttpRequest Level 2 Ajax library, xhr2-lib

Ajax applications are wide spread these days and one thing that has proven a pain in the arse is uploading files. I’m sure most people will have fired off a fake asynchronous upload to a hidden iframe or used a sneaky swf to handle it but now with the development of the level 2 specification for the XMLHttpRequest object some of those woes may soon (if you are ok about not supporting IE) be a thing of the past.

View the demo Download the files

The FileReader API and the DataTransfer object

One of the coolest things I’ve messed about with so far in HTML5 is the FileReader and File APIs and their ability to read in files from the users computer. With this also comes the addition of the DataTransfer object which carries a reference to the files in the drag/drop events. What this means is that we can drag files from our desktop and drop them onto our web applications where we can use JavaScript to read in their data or pass them off to be uploaded. The code snippets below are taken from the FileAPI singleton used in the demo to handle the file manipulation and uploading.

this.showDroppedFiles = function (ev) {
    ev.stopPropagation();
    ev.preventDefault();
    var files = ev.dataTransfer.files;
    addFileListItems(files);
}

The above method is fired when the user drops files onto a specified element, we stop any default action for the event and stop it bubbling before accessing the dataTransfer object of the drop event to retrieve the list of files that were dropped before passing them to the addFileListItems method shown below.

var addFileListItems = function (files) {
    for (var i = 0; i < files.length; i++) {
        var fr = new FileReader();
        fr.file = files[i];
        fr.addEventListener("loadend", showFileInList, false);
        fr.readAsDataURL(files[i]);
    }
}

Here we loop over our file list and for each one we initialise a FileReader object and bind the showFileInList method to it’s loadend event which fires once our FileReader object is done reading in the file as a data URL. Note: my testing revealed that addEventListener is not supported for FileReader in Chrome. Currently Safari and IE9 do not support the file API. It is only necessary to do this to show the preview for images in the list (see demo) other files could just be added to the queue directly. In the showFileInList method (shown below) we access the file we have just read, populate a list with it’s details and push it into an Array ready to be uploaded. Also you’ll notice the addition of an upload progress indicator which we’ll look at with the uploading via Ajax.

var showFileInList = function (ev) {
    var file = ev.target.file;
    if (file) {
        var li = document.createElement("li");
        if (file.type.search(/image\/.*/) != -1) {
            var thumb = new Image();
            thumb.src = ev.target.result;
            thumb.addEventListener("mouseover", showImagePreview, false);
            thumb.addEventListener("mouseout", removePreview, false);
            li.appendChild(thumb);
        }
        var h3 = document.createElement("h3");
        var h3Text = document.createTextNode(file.name);
        h3.appendChild(h3Text);
        li.appendChild(h3)
        var p = document.createElement("p");
        var pText = document.createTextNode(
            "File type: ("
            + file.type + ") - " +
            Math.round(file.size / 1024) + "KB"
        );
        p.appendChild(pText);
        li.appendChild(p);
        var divLoader = document.createElement("div");
        divLoader.className = "loadingIndicator";
        li.appendChild(divLoader);
        fileList.appendChild(li);
        fileQueue.push({
            file : file,
            li : li
        });
    }
}

XMLHttpRequest object send() with File

In the level 2 specification the send method can accept a File object argument which allows us to stream binary chunked data to the server asynchronously. So when we have chosen the files we want to upload and have our queue all set up ready to roll we can fire each file off to our upload method to be sent to the server for saving as shown in the two methods below.

this.uploadQueue = function (ev) {
    ev.preventDefault();
    while (fileQueue.length > 0) {
        var item = fileQueue.pop();
        var p = document.createElement("p");
        p.className = "loader";
        var pText = document.createTextNode("Uploading...");
        p.appendChild(pText);
        item.li.appendChild(p);
        if (item.file.size < 1048576) {
            uploadFile(item.file, item.li);
        } else {
            p.textContent = "File to large";
            p.style["color"] = "red";
        }
    }
}

In this method we loop through our file list and send each one in turn, I only have the file size check at 1MB for the demo – can be higher. I set up some loading text here to let the user know what’s going on, we also have a progress bar which was set up earlier that we will update as the file uploads (explained below).

var uploadFile = function (file, li) {
    if (li && file) {
        var xhr = new XMLHttpRequest(),
            upload = xhr.upload;
        upload.addEventListener("progress", function (ev) {
            if (ev.lengthComputable) {
                var loader = li.getElementsByTagName("div")[0];
                loader.style["width"] = (ev.loaded / ev.total) * 100 + "%";
            }
        }, false);
        upload.addEventListener("load", function (ev) {
            var ps = li.getElementsByTagName("p");
            var div = li.getElementsByTagName("div")[0];
            div.style["width"] = "100%";
            div.style["backgroundColor"] = "#0f0";
            for (var i = 0; i < ps.length; i++) {
                if (ps[i].className == "loader") {
                    ps[i].textContent = "Upload complete";
                    ps[i].style["color"] = "#3DD13F";
                    break;
                }
            }
        }, false);
        upload.addEventListener("error", function (ev) {console.log(ev);}, false);
        xhr.open(
            "POST",
            "upload.php"
        );
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.send(file);
    }
}

With the level 2 implementation of XMLHttpRequest we have access to it’s associated XMLHttpRequestUpload object with it’s very handy progress event handler with which we can create progress indicators. The progress event handler presents the lengthComputable attribute which if true enables us to calculate the progress by taking what is loaded against the total. All we need do is set the relevant http headers, including a custom header which we need to use to pass our file name to the server to save the file, and call the send method with the file object as the argument.

Summary

Although the code is somewhat experimental I think it is something that I will most definitely use in an application in the not too distant future, Firefox and Chrome are at the time of writing the only browsers with support for FileReader and File APIs and I should imagine Safari is not far behind. As for Internet Explorer 9…. who knows?