jQuery file upload with Bootstrap progress bar

Performing an asynchronous file upload from the browser is a common problem with almost as many solutions as there are developers. The following solution is the best fit for my needs, and also works well with most popular browsers. Backwards compatibility is not an issue in this case which is great, because I can use the new technologies as they are supposed to be used.

Everything is put together in JSFiddle for a working example. I will continue to explain the parts below...

First, the input field needs to be styled as a button. The form tag is only present for us to be able to reset the file input field later on.

<form>
    <span class="fileUpload btn btn-default">
        <span class="glyphicon glyphicon-upload"></span> Upload file
        <input type="file" id="uploadFile" />
    </span>
</form>

.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

The Javascript is contained within one method which is executed when the file input is changed.

$("#uploadFile").change(function() {
    var formData = new FormData();
    formData.append('file', this.files[0]);
   
    $("#files").append($("#fileUploadProgressTemplate").tmpl());
    $("#fileUploadError").addClass("hide");
   
    $.ajax({
        url: '/url/json/',
        type: 'POST',
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', function(evt) {
                    var percent = (evt.loaded / evt.total) * 100;
                    $("#files").find(".progress-bar").width(percent + "%");
                }, false);
            }
            return xhr;
        },
        success: function(data) {
            $("#files").children().last().remove();
            $("#files").append($("#fileUploadItemTemplate").tmpl(data));
            $("#uploadFile").closest("form").trigger("reset");
        },
        error: function() {
            $("#fileUploadError").removeClass("hide").text("An error occured!");
            $("#files").children().last().remove();
            $("#uploadFile").closest("form").trigger("reset");
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    }, 'json');
});

When selecting a file for upload, a new AJAX request is performed. I use the FormData object to pass on the file to the backend as multipart/form-data. By attaching an event handler to the progress event I can set the width of the progress bar to the calculated percentage.

The error and success methods are simple handlers that hide the progress bar and either adds the file to the list on success or displays an error message on error.

In this particular case I am using jQuery templating, but since that project is abandoned I would recommend chosing another template engine...