Displaying file upload progress

It would be nice if there was a straightforward way to display the progress of a file upload using the progressbar widget. Unfortunately, we are afforded no such luxury. The uploading of a file happens between the transitions of pages. However, the necessary hacks to display the upload progress using the progressbar widgets have shrunk in size, thanks to the modern standards and browsers. Let's take a look at how we can take advantage of the onprogress event of the XML HTTP Request object in Ajax requests.

Getting ready

For this demonstration, we will create a simple form with a simple file field. Inside the form, we'll create some HTML for displaying the progressbar widget. It'll be hidden until the user initiates a file upload.

<form action="http://127.0.0.1:8000/" method="POST">
    <input type="file" name="fileupload"/>
    <br/>
    <input type="submit" value="Upload"/>
    <div id="upload-container" class="ui-helper-hidden"&gt...