Aurigma Image Uploader 4.8 Dual
Adding a Custom Progress Bar
See Also

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 | Copy 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 | Copy 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 | Copy 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 | Copy 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>

Note
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