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

Key Takeaways

• The HTML5 progress tag, which provides attributes for current progress value and value at completion, can be used to create a graphical file upload progress bar, although the author chose to use a standard p tag for more styling options.
• The progress bar can be styled using CSS, with the green bar created as a graphic twice as wide as the progress element, and a solid color applied when the upload succeeds or fails.
• The progress bar is implemented in JavaScript by modifying the UploadFile() function, adding a “progress” event handler function that calculates the new background position, and setting a class of “success” or “failure” when the upload completes.

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: 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
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

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:

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

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:

// 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));

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):

		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

Finally, we send the file to our PHP server as before:

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = (xhr.status == 200 ? "success" : "failure");
			}
		};

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.

Frequently Asked Questions (FAQs) about HTML5 JavaScript File Upload Progress Bar

How can I customize the appearance of the progress bar?

Customizing the appearance of the progress bar can be done using CSS. You can change the color, height, width, and even the shape of the progress bar. For instance, to change the color, you can use the ‘background-color’ property. You can also use the ‘border-radius’ property to make the progress bar circular or rounded. Remember to target the correct class or id in your CSS to apply these changes to the progress bar.

Can I use this progress bar for multiple file uploads?

Yes, you can use this progress bar for multiple file uploads. However, you will need to modify the JavaScript code to handle multiple files. You can use the ‘multiple’ attribute in the input tag to allow the selection of multiple files. Then, in your JavaScript, you will need to loop through the files and upload them individually, updating the progress bar for each file.

How can I display the percentage of upload completion on the progress bar?

Displaying the percentage of upload completion on the progress bar can be achieved by updating the text content of the progress bar element in the ‘progress’ event listener. You can calculate the percentage by dividing the loaded amount by the total amount and multiplying by 100. Then, set this value as the text content of the progress bar element.

Why is my progress bar not updating during file upload?

If your progress bar is not updating during file upload, it could be due to several reasons. One common reason is that the ‘progress’ event listener is not set up correctly. Make sure that you have added the event listener to the correct object and that the event name is spelled correctly. Also, check that the code inside the event listener is correctly updating the value and max attributes of the progress bar.

Can I use this progress bar with other programming languages like PHP or Python?

Yes, you can use this progress bar with other programming languages like PHP or Python. The progress bar is implemented using HTML and JavaScript, which are client-side technologies and can interact with any server-side technology. You will need to modify the AJAX request in the JavaScript code to send the file to your server-side script, and your server-side script will need to handle the file upload and return the progress information.

How can I make the progress bar animate smoothly?

To make the progress bar animate smoothly, you can use CSS transitions. Add a ‘transition’ property to the progress bar element in your CSS, specifying the property to transition (e.g., ‘width’), the duration of the transition, and the timing function (e.g., ‘linear’, ‘ease-in’, ‘ease-out’).

How can I handle errors during file upload?

Handling errors during file upload can be done in the ‘error’ event listener. This event is fired when an error occurs during the upload. In the event listener, you can display an error message to the user and reset the progress bar.

Can I cancel the file upload and reset the progress bar?

Yes, you can cancel the file upload and reset the progress bar. To cancel the file upload, you can call the ‘abort’ method on the XMLHttpRequest object. To reset the progress bar, you can set its value attribute to 0.

How can I limit the file size for upload?

Limiting the file size for upload can be done in the JavaScript code before sending the AJAX request. You can get the size of the file from the ‘size’ property of the file object, and if it exceeds your limit, display an error message and abort the upload.

Can I use this progress bar for other types of AJAX requests, not just file uploads?

Yes, you can use this progress bar for other types of AJAX requests, not just file uploads. The ‘progress’ event is fired for any type of AJAX request, not just file uploads. You will need to modify the JavaScript code to send the appropriate AJAX request and update the progress bar based on the progress of the request.

The above is the detailed content of How to Create Graphical File Upload Progress Bars in HTML5 and JavaScript. For more information, please follow other related articles on the PHP Chinese website!