Image Uploader provides a standard progress bar dialog. However, sometimes it is more convenient to replace it with your own (for example to customize it according to your site design). Besides, you may want to add custom error handling. This topic demonstrates how to do that.

Running Image Uploader in Silent Mode

To suppress the standard progress bar you should activate a so-called silent mode. In the silent mode, no default message boxes and no progress bar will be displayed. The property named SilentMode toggles this state. Specify true to switch to the silent mode:

JavaScript CopyCode imageCopy Code
<script type="text/javascript" src="iuembed.js"></script>

<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Any other params...

iu.addParam("SilentMode", "true");

//...Any other event handlers...

iu.addEventListener("Progress", "ImageUploader_Progress");

//...

iu.writeHtml();
</script>

Adding Progress Bar Element

A custom progress bar may be implemented in several ways. For example, you can use a standard ActiveX component Progress Bar, or use the IMG element (or some other element) changing its width. Let's use the DIV element and change its width via styles:

JavaScript CopyCode imageCopy Code
<span id="ProgressBarText" style="display:none;"></span>
<br />
<div id="ProgressBar" style="width:0px;height:20px;background-color:blue;display:none;"></div>

Changing Progress Bar Position on Progress Status Change

To move the progress bar position you need to add the following event handler:

JavaScript CopyCode imageCopy Code
<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
    //Max width of progress bar 
    var progresBarWidth = 200;
    var progresBar = document.getElementById("ProgressBar");
    var progresBarText = document.getElementById("ProgressBarText");    
    switch(Status)
    {
        case "START":
            //Show progress bar
            progresBar.style.display = "block";
            progresBarText.style.display = "block";
            //Set width of progress bar to 0px
            progresBar.style.width = "0px";
            break;
        case "PREPARE":
            //Show preparing progress 
            progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
            //Set width of progress bar 
            progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
            break;
        case "UPLOAD":
            //Show uploading progress 
            progresBarText.innerText = Status + " " + Math.round(Value/ValueMax*100) + "%";
            //Set width of progress bar 
            progresBar.style.width = Math.round(Value/ValueMax*progresBarWidth) + "px";
            break;
        case "COMPLETE":
            //Hide progress bar
            progresBar.style.display = "none";
            progresBarText.style.display = "none";
            //Show custom message
            alert("All images were successfully uploaded.");
            //Redirect to galery.asp page when upload process is completed
            //window.location.replace('gallery.asp');            
            break;
        case "CANCEL":
            //Hide progress bar
            progresBar.style.display = "none";
            progresBarText.style.display = "none";
            //Show custom message
            alert("Uploading were canceled.");            
            break;
        case "ERROR":
            //Hide progress bar            
            progresBar.style.display = "none";
            progresBarText.style.display = "none";    
            //Show custom message
            alert("Error arrised during uploading.");    
            break;
    }
}    
</script>

Concurrent Upload

In case of a concurrent upload, the example above will not work as ValueMax and Value arguments contain different values for different connections. Instead, you may use the Progress argument that contains a value reflecting the whole process completion in percentage terms. A modified version of the ImageUploader_Progress handler may look like the following:

JavaScript CopyCode imageCopy Code
<script type="text/javascript">
function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText) {
    //Max width of progress bar 
    var progresBarWidth = 200;
    var progresBar = document.getElementById("ProgressBar");
    var progresBarText = document.getElementById("ProgressBarText");    
    switch(Status)
    {
        case "START":
            //Show progress bar
            progresBar.style.display = "block";
            progresBarText.style.display = "block";
            //Set width of progress bar to 0px
            progresBar.style.width = "0px";
            break;
        case "PREPARE":
            //Show preparing progress 
            progresBarText.innerText = Status + " " + Progress + "%";
            //Set width of progress bar 
            progresBar.style.width = Progress + "px";
            break;
        case "UPLOAD":
            //Show uploading progress 
            progresBarText.innerText = Status + " " + Progress + "%";
            //Set width of progress bar 
            progresBar.style.width = Progress + "px";
            break;
        case "COMPLETE":
            //Hide progress bar
            progresBar.style.display = "none";
            progresBarText.style.display = "none";
            //Show custom message
            alert("All images were successfully uploaded.");
            break;
        case "CANCEL":
            //Hide progress bar
            progresBar.style.display = "none";
            progresBarText.style.display = "none";
            //Show custom message
            alert("Uploading were canceled.");            
            break;
        case "ERROR":
            //Hide progress bar            
            progresBar.style.display = "none";
            progresBarText.style.display = "none";    
            //Show custom message
            alert("Error arrised during uploading.");    
            break;
    }
}    
</script>
NoteNote

You may use the Progress argument for a sequential upload too.

See Also

Reference

Progress Event

Manual

Uploading Files Sequentially And Concurrently

Sample

Concurrent Upload Sample