File Download Progress Bar

Yesterday I added a progress bar to my ASP.NET page for downloading YouTube videos. There was no visual indication that the download was taking place because the page just appeared to be taking a long time to load. I would have to open the download file location to verify that something was being downloaded.

Fortunately the WebClient class does have a DownloadProgressChanged method which will return the percentage of the download that has been completed. So it was just a matter of displaying that information in the ASP.NET page. First I moved the code for performing the download to a web service. That made more sense than using an asynchronous task initiated in the code behind for the page. The web service has a method for passing in the download url and file name and a method to return the download progress percentage. I used a Script Manager to create the JavaScript proxy for the web service so I could call the web service methods using JavaScript.

For the progress bar, I used Matt Berseth's ASP.NET AJAX Progress Bar Control which is based on the WebAppers Simple Javascript Progress Bar with CSS. This had to be recompiled for ASP.NET 2.0 and the 1.0.11119.0 version of AjaxControlToolkit. The ASP.NET page does not require any code in its code behind file. Everything is done through AJAX. A JavaScript setInterval is used to make repeated calls to the web service method to get the download progress. 

I have created a generic version which can be used to download any file. You can download the necessary files at: http://www.williamsportwebdeveloper.com/AjaxDownloader.zip However I did not include the web.config file or the complete project solution because I was using one of my development sites with a lot of other prototype crap.