A status bar is a part of interface that displays the number of items available for selection and, optionally, a number of already selected items—for example, items selected for upload. Image Uploader does not provide any status bar by default, however, you can easily add one on your own.

NoteNote

Naturally, this status bar makes sense only in the two-pane or three-pane layout mode, as files displayed in the one-pane layout are all selected for upload.

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

HTML CopyCode imageCopy Code
<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.

CSS CopyCode imageCopy Code
#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 we 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 get us the number of files in the current folder (number of items on the folder pane).
  • UploadFileCount will get us the number of files selected for upload.

Here is the code of this function.

JavaScript CopyCode imageCopy Code
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 remove some of them (UploadFileCountChange event).

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

JavaScript CopyCode imageCopy Code
<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