Customizing Progress Bar in ActiveX/Java Uploader

ActiveX/Java 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). In order to perform this you should:

hide the default progress dialog
create your own progress bar
make your progress bar displaying the actual state of uploading progress

Hiding Default Progress Dialog

To hide the standard progress dialog you should upload files in background mode. To turn on this mode set the EnableUploadProgressEnableUploadProgress (ASP.NET)EnableUploadProgress (PHP)enableUploadProgress (JavaScript) property to false, like in the following sample:

ASP.NET

<aur:Uploader ID="Uploader1" runat="server" 
    Height="500px" Width="800px" EnableUploadProgress="false"/>

PHP

$uploader = new Uploader("Uploader1");
$uploader->setWidth("800px");
$uploader->setHeight("500px");
$uploader->setEnableUploadProgress(false);
$uploader->render();

JavaScript

<script  type="text/javascript">
   var u = $au.uploader({
        id : "Uploader1",
        width : "800px",
        height : "500px",
        enableUploadProgress : "false"
    });
   u.writeHtml();
</script>

Adding Custom Progress Bar to Page

A custom progress bar may be implemented in several ways. For example, you can utilize a standard ActiveX component Progress Bar, or use the IMG element (or some other element) changing its width. Here, we use the DIV element:

html

<div style="width:800px; background-color:lightgrey">
   <div id="ProgressBar" style="width:0px; height:20px; background-color:blue; display:none;">
      <span id="ProgressBarText" style="width:800px; display:none; color:white; margin-left:390px;"></span>
   </div>
</div>

The following section shows how to change the element's width to display current upload progress.

Changing Progress Bar State

To synchronize your progress bar with upload process you can use the BeforeUpload, AfterUpload, and Progress events; also you can handle the Error event. To utilize these events you should set the event handlers; the following sample shows how to perform this:

ASP.NET

<aur:Uploader ID="Uploader1" runat="server">
    <ClientEvents>
        <aur:ClientEvent EventName="BeforeUpload" HandlerName="onBeforeUpload" />
        <aur:ClientEvent EventName="AfterUpload" HandlerName="onAfterUpload" />
        <aur:ClientEvent EventName="Progress" HandlerName="onProgress" />
        <aur:ClientEvent EventName="Error" HandlerName="onError" />
    </ClientEvents>
</aur:Uploader>

PHP

$uploader = new Uploader("Uploader1");
$uploader->getClientEvents()->setBeforeUpload("onBeforeUpload");
$uploader->getClientEvents()->setAfterUpload("onAfterUpload");
$uploader->getClientEvents()->setProgress("onProgress");
$uploader->getClientEvents()->setError("onError");
$uploader->render();

JavaScript

<script type="text/javascript">
   var u = $au.uploader({
        id : "Uploader1",
        events: {
            beforeUpload: [onBeforeUpload],
            afterUpload: [onAfterUpload],
            progress: [onProgress],
            error: [onError]
        }
    });
   u.writeHtml();
</script>

The BeforeUpload and AfterUpload events allow to show/hide a progress bar. The first event fires when the upload is about to start, so it is a good moment to show the progress bar; the second one fires when the upload has been finished you can to hide the progress bar in this moment. The Error event can be used to hide proress bar if an error occured.

The Progress event gives you an ability to reflect the upload progress. You can display progress of the current file upload using the PercentCurrent event parameter and/or total upload progress via the PercentTotal parameter. The last parameter, Index, is the number of currently uploading file.

The following sample makes the progress bar (the div element defined in the previous section) reflecting the current state of the total upload progress:

JavaScript

<script type="text/javascript">
function onProgress(percent, uploadedFiles, totalFiles, uploadedBytes, totalBytes){
   var progressBar = document.getElementById("ProgressBar");
   var progressBarText = document.getElementById("ProgressBarText");        
   //Max width of progress bar 
   var progressBarWidth = 800;
   //Show download progress 
   //Set width of progress bar 
   progressBar.style.width = Math.round(percent/100*progressBarWidth) + "px";
   //Set percentage text
   progressBarText.innerHTML = percent + "&#37;";
}

function onBeforeUpload() {
   var progressBar = document.getElementById("ProgressBar");
   var progressBarText = document.getElementById("ProgressBarText");        
    //Show zero width progress bar
    progressBar.style.display = "block";
    progressBarText.style.display = "block";
    progressBar.style.width = "0px";
}       

function hideProgressBar(){
    var progressBar = document.getElementById("ProgressBar");
    var progressBarText = document.getElementById("ProgressBarText");        
    //Hide progress bar
    progressBar.style.display = "none";
    progressBarText.style.display = "none";
}

function onAfterUpload(response) {
    hideProgressBar();
}       

function onError(errorCode, httpResponseCode, errorPage, additionalInfo) {
    hideProgressBar();
}       
</script>