In my previous posts, we discovered How to Use HTML5 File Drag Drop, Open Files Using JavaScript and Asynchronously Upload Files Using Ajax. In the final part of this series, we cover the most exciting part of the process: graphical progress bars!
File upload progress bars provide essential user feedback but they’ve been notoriously difficult to implement. Until now that is. Both Firefox and Chrome support the XMLHttpRequest2 object which offers a progress event handler. But first, let’s consider how our progress bar will be implemented…
The HTML5 progress tag
The new progress tag provides two attributes:
- value: the current progress value
- max: the value at completion
The tag would have been ideal in this demonstration and, although it’s supported in Chrome, it’s only just appeared in Firefox 6. In addition, neither browser offers many styling properties so I dropped it in favor of a standard p tag. This is appended as a child to a div with the ID “progress”.
Styling the Progress Bar
Our p tag will show the file name in a bordered box which is 250px in size:
#progress p
{
display: block;
width: 240px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset
border-radius: 5px;
}
For the green bar itself, I created a graphic which was twice as wide as the progress element (500px). The left 250px is colored and the right 250px is transparent:
This graphic is used as a background image for the progress bar and positioned at “X% 0″ where X% indicates the proportion which is REMAINING (not COMPLETED), i.e.
- progress starts from “background-position: 100% 0″, i.e. 100% remaining
- progress ends at “background-position: 0% 0″, i.e. nothing’s remaining
- “background-position: 30% 0″ means 70% has been completed:
A solid color is applied by setting a class when the upload succeeds or fails:
#progress p.success
{
background: #0c0 none 0 0 no-repeat;
}
#progress p.failed
{
background: #c00 none 0 0 no-repeat;
}
Implementing the Progress Bar in JavaScript
We can now modify our UploadFile() function. When a valid JPG file is encountered, we append a new p tag to the #progress element and add the file name as text:
// upload JPEG files
function UploadFile(file) {
var xhr = new XMLHttpRequest();
if (xhr.upload file.type == "image/jpeg" file.size = $id("MAX_FILE_SIZE").value) {
// create progress bar
var o = $id("progress");
var progress = o.appendChild(document.createElement("p"));
progress.appendChild(document.createTextNode("upload " + file.name));
We now require a “progress” event handler function. This receives an object with .loaded and .total properties — a little math is necessary to calculate the new backgroundPosition:
// progress bar
xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt(100 - (e.loaded / e.total * 100));
progress.style.backgroundPosition = pc + "% 0";
}, false);
If you’re familiar with Ajax, you’ll recognise the onreadystatechange event handler. This determines when the upload has completed and styles the progress bar accordingly (sets a class of “success” if the upload was successful):
// file received/failed
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure");
}
};
Finally, we send the file to our PHP server as before:
// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
}
}
We finally have a solution which:
- enables file dragging and dropping onto a web page element
- analyzes and displays dropped files on the client
- asynchronously uploads files to the server
- shows a graphical progress bar during upload
- uses progressive enhancement to support most browsers
- is coded without requiring a JavaScript library.
Please view the demonstration page, however, note this is hosted on a server without PHP so file uploads will not occur. To test it, please download the files to examine the code and host it on your own server.
I hope you’ve enjoyed this series and are considering how file drag and drop could help your web application.
