---
title: "Customizing Progress Bar in ActiveX/Java Uploader"
canonical: https://www.aurigma.com/docs/us8/customizing-progress-bar.htm
product: "Upload Suite 8"
---

# 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:

1. hide the default progress dialog
2. create your own progress bar
3. 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 EnableUploadProgress[EnableUploadProgress (ASP.NET)](https://www.aurigma.com/docs/us8/JA_P_Aurigma_ImageUploader_Uploader_EnableUploadProgress.htm.md)[EnableUploadProgress (PHP)](https://www.aurigma.com/docs/us8/JA_P_P_Uploader_EnableUploadProgress.htm.md)[enableUploadProgress (JavaScript)](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_enableUploadProgress.htm.md) property to `false`, like in the following sample:
 ```aspx-cs
<aur:Uploader ID="Uploader1" runat="server" 
    Height="500px" Width="800px" EnableUploadProgress="false"/>
``` ```
$uploader = new Uploader("Uploader1");
$uploader->setWidth("800px");
$uploader->setHeight("500px");
$uploader->setEnableUploadProgress(false);
$uploader->render();
``` ```
<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](https://www.aurigma.com/docs/us8/JA_E_Uploader_BeforeUpload.htm.md), [AfterUpload](https://www.aurigma.com/docs/us8/JA_E_Uploader_AfterUpload.htm.md), and [Progress](https://www.aurigma.com/docs/us8/JA_E_Uploader_Progress.htm.md) events; also you can handle the [Error](https://www.aurigma.com/docs/us8/JA_E_Uploader_Error.htm.md) event. To utilize these events you should set the event handlers; the following sample shows how to perform this:
 ```aspx-cs
<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>
``` ```
$uploader = new Uploader("Uploader1");
$uploader->getClientEvents()->setBeforeUpload("onBeforeUpload");
$uploader->getClientEvents()->setAfterUpload("onAfterUpload");
$uploader->getClientEvents()->setProgress("onProgress");
$uploader->getClientEvents()->setError("onError");
$uploader->render();
``` ```
<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:
 ```
<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>
```