Customizing Progress Bar

File Downloader 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 downloading progress

Hiding Default Progress Dialog

To hide the standard progress dialog you should download files in background mode. To turn on this mode set the ShowProgressDialog property to false, like in the following sample:

JavaScript

<script language="javascript">
   var fd = new FileDownloaderWriter("FileDownloader1", 122, 44);
   //...other parameters...
   fd.addParam("ShowProgressDialog","false");
   //...other parameters...
   fd.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:200px; background-color:lightgrey">
   <div id="ProgressBar" style="width:0px; height:20px; background-color:blue; display:none;">
      <span id="ProgressBarText" style="width:200px; display:none; color:white; margin-left:90px;">
      </span>
   </div>
</div>

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

Changing Progress Bar State

To synchronize your progress bar with download process you can use the DownloadStep and Progress events. To utilize these events you should set the event handlers; the following sample shows how to do it:

JavaScript

<script language="javascript">
   var fd = new FileDownloaderWriter("FileDownloader1", 122, 44);
   //...other parameters...
   fd.addEventListener("Progress", "onProgress");
   fd.addEventListener("DownloadStep", "onDownloadStep");
   //...other parameters...
   fd.writeHtml();
</script>

The DownloadStep event allows to show/hide a progress bar. It fires in a certain steps of the download process. Each download step has its own predefined number; you get this number as the event parameter. We will handle the following steps:

the file download is about to start (6); it is a good moment to show the progress bar
the file download has been finished (7); you can to hide the progress bar in this moment

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

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

JavaScript

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

function onDownloadStep(Step) {
   var progressBar = document.getElementById("ProgressBar");
   var progressBarText = document.getElementById("ProgressBarText");        
   switch(Step)
   {
      case 6: // File download is about to start
         //Show zero width progress bar
         progressBar.style.display = "block";
         progressBarText.style.display = "block";
         progressBar.style.width = "0px";
         break;
      case 7: // File download has been finished
         //Hide progress bar
         progressBar.style.display = "none";
         progressBarText.style.display = "none";
         break;
   }
}       
</script>