Adding a Status Bar

Adding and Styling HTML Code

The base of our status bar will be an empty DIV element. Add it where it should be on the page, for example, right after Image Uploader creation code (after the closing SCRIPT tag).

<div id="StatusBar"></div>

Then, add style definition for this DIV element. You can place this definition either in a separate CSS file or in the HEAD section of your HTML document. Make sure that the status bar is invisible be default, because it should not be displayed until the control or applet is fully loaded.

#StatusBar {
	width: 650px; /* width of Image Uploader control/applet */
	visibility: hidden; /* hide the status bar by default */
	text-align: right;
	font-weight: bold;
	border: solid black 1px;
	background: white;
	padding: 3px;
}

Adding JavaScript Code

Now you need to add some logic that will display the total number of items in the folder and the number of items currently selected for upload. This is quite easy, and this all will be done by only one function. This function will do the following:

1. Guarantee that the status bar is visible.
2. Get the total number of the items in the current folder.
3. Get the total number of the items that are selected for upload.
4. Set the text of the status bar based on the results of Steps 2 and 3.

This all is fairly easy, as Image Uploader provides these two properties:

• PaneItemCount will provide the number of files in the current folder (number of items on the folder pane).
• UploadFileCount will provide the number of files selected for upload as well.

Here is the code of this function.

function SetStatusText() {
	//Get a reference to the ImageUploader instance
	var imageUploader = getImageUploader("ImageUploader1");
	
	//Get a reference to the status bar DIV element
	var statusBar = document.getElementById("StatusBar");
	
	//Make the status bar visible
	statusBar.style.visibility = "visible";
	
	//Get the number of files in the folder pane
	var cnt = imageUploader.getPaneItemCount("FolderPane");
	
	//This value will be always displayed
	var text = cnt + " item(s)";
	
	//Get the number of files selected for upload
	cnt = imageUploader.getUploadFileCount();
	
	//If more than 0 files are selected for upload, display this information on
	//the status bar too
	statusBar.innerHTML =
		(cnt > 0) ? text + ". " + cnt + " selected for upload" : text;
}

We are almost done now. The only thing left is to deside when this function should be called. There are three situations when we should call the SetStatusText function:

• When the control/applet is fully loaded.
• When the user goes to another folder (FolderChange event).
• When the user adds more files for upload or removes some of them (UploadFileCountChange event).

That is why we need to create three event handlers as in the following snippet.

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
function SetStatusText() {
	//...Body of this function is skipped for brevity...
}

var iu = new ImageUploaderWriter("ImageUploader1", 650, 400);

//...ImageUploader parameters and other event handlers

//Update status bar text when...
// ...the control/applet is fully loaded
iu.fullPageLoadListenerName="SetStatusText";

// ...the user goes to another folder
iu.addEventListener("FolderChange", "SetStatusText");

// ...the number of items selected for upload is chaned
iu.addEventListener("UploadFileCountChange", "SetStatusText");

iu.writeHtml();
</script>

The status bar is ready.

See Also

Reference

• PaneItemCount Property
• UploadFileCount Property
• FolderChange Event
• UploadFileCountChange Event