How do I display file upload progress using the Dojo ProgressBar?
Author: Deron Eriksson
Description: This tutorial demonstrates how to display the progress of a file upload with a Dojo ProgressBar.
Tutorial created using: Windows XP || JDK 1.5.0_09 || Eclipse Web Tools Platform 2.0 (Eclipse 3.3.0) || Dojo 1.0.2


Page:    1 2 3 >

This tutorial demonstrates how to use a DojoSW ProgressBar to display the progress of a file upload, utilizing JavaSW classes that we developed in other tutorials. An example of the Dojo ProgressBar is shown below:

Dojo ProgressBar Example

In another tutorial, we created a TestProgressListener class to allow us to monitor the progress of a file upload to a servletW. We utilized the ApacheSW Commons FileUploadS library to handle the file upload. The TestProgressListener class implements the ProgressListener interface from the FileUpload library. The file gets uploaded to the TestServlet class, which sticks a reference to the TestProgressListener in a session. The ProgressServlet reads the TestProgressListener object from the session and displays the status of the file upload. The upload form to upload files to the TestServlet is located on upload.jsp.

I downloaded the Dojo AjaxW library from http://dojotoolkit.org/. I unpacked the library and placed it in the web directory of my project. In a production system, I would place the library somewhere on a web server rather than actually packaging it into a project, but this is fine for demonstration purposes.

file-upload project

I modified the upload.jsp file from the previous tutorial, to include the Dojo ProgressBar. I added a style section for CSSW formatting of the ProgressBar. The Dojo library is referenced via "dojo-release-1.0.2/dojo/dojo.js". The ProgressBar is included via the JavascriptW call to dojo.require("dijit.ProgressBar").

upload.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Page</title>

<style type="text/css">
@import "dojo-release-1.0.2/dijit/themes/tundra/tundra.css";
@import "dojo-release-1.0.2/dojo/resources/dojo.css"
</style>

<script type="text/javascript" src="dojo-release-1.0.2/dojo/dojo.js" djConfig="parseOnLoad: true">
</script>

<script type="text/javascript">
dojo.require("dijit.ProgressBar");

function doProgress() {
	var button = window.document.getElementById("submitButton");
	button.disabled = true;
	var max = 100;
	var prog = 0;
	var counter = 0;
	getProgress();
	doProgressLoop(prog, max, counter);
}

function doProgressLoop(prog, max, counter) { 
   	var x = dojo.byId('progress-content').innerHTML;
   	var y = parseInt(x);
   	if (!isNaN(y)) {
   		prog = y;
   	}
   	jsProgress.update({ maximum: max, progress: prog });
	counter = counter + 1;
	dojo.byId('counter').innerHTML = counter;
   	if (prog < 100) {
   		setTimeout("getProgress()", 500);
   		setTimeout("doProgressLoop(" + prog + "," + max + "," + counter + ")", 1000);
   	}
}

function getProgress() {
    dojo.xhrGet({url: 'progress', // http://localhost:8080/file-upload/progress
                 load: function (data) { dojo.byId('progress-content').innerHTML = data; },
                 error: function (data) { dojo.byId('progress-content').innerHTML = "Error retrieving progress"; }
                });
}

</script>
</head>
<body>
<div>
	<form name="form1" id="form1" action="test" method="post" enctype="multipart/form-data">
	<input type="hidden" name="hiddenfield1" value="ok">
	Files to upload:
	<br/>
	<input type="file" size="50" name="file1">
	<br/>
	<input type="file" size="50" name="file2">
	<br/>
	<input type="file" size="50" name="file3">
	<br/>
	<input type="button" value="Upload" id="submitButton" onclick="form1.submit();doProgress();">
	</form>
</div>	
<div class="tundra">Progress: 
	<div dojoType="dijit.ProgressBar" style="width: 300px" jsId="jsProgress" id="downloadProgress">
	</div>
</div>

<br/><br/><br/>
<div style="visibility: visible">
Content from Progress Servlet: <span id="progress-content">---</span><br/>
Counter: <span id="counter">---</span><br/>
</div>	
</body>
</html>

Clicking the Upload button submits the form and calls the doProgress() function which disables the Upload button and initializes the max, prog, and counter variables. The max variable is the maximum progress, which is 100 (100%). The prog variable is the upload progress, which starts at 0 (0%). The counter variable is a simple counter variable. The getProgress() function is called and then the doProgressLoop() function is called.

The getProgress() function contacts the ProgressServlet (via the 'progress' URL) and puts the results in the 'progress-content' span element.

The doProgressLoop() is a recursive function that calls itself until the file upload is complete. It reads the 'progress-content' span element, which gets its innerHTML value from the ProgressServlet via the getProgress() call. If the 'progress-content' value is an integer, the prog (progress) variable is updated with this value. The ProgressBar (jsProgress) is updated with the current progress via the jsProgress.update call. The counter is incremented and its value is placed in the 'counter' span element. If the prog (progress) variable is less than 100, meaning that the file upload hasn't completed yet, then getProgress() is called in 500 milliseconds, and doProgressLoop() is called in 1000 milliseconds (1 second) with the current prog, max, and counter values.

The doProgressLoop() will continue to call itself until the progress is 100%, meaning that the file upload has completed. At this point, the TestServlet will display another page, since the upload will be complete.

(Continued on page 2)

Page:    1 2 3 >