JavaScript

How to Create Graphical File Upload Progress Bars in HTML5 and JavaScript

    Craig Buckler
    Share

    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 #446;
	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:

    progress bar

    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:
      progress bar

    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:

    1. enables file dragging and dropping onto a web page element
    2. analyzes and displays dropped files on the client
    3. asynchronously uploads files to the server
    4. shows a graphical progress bar during upload
    5. uses progressive enhancement to support most browsers
    6. 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.

    If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Learn HTML5.