andyMatthews.net

Downloading Files with Adobe AIR, HTML and JS Part 2. Adding a Progress Bar with Canvas

Just a quick follow up to my previous post about downloading files with Adobe AIR. Reader Jason asked "How would you create a progress bar to go with the download." If this is something you've been asking for, then read on. You can also download the complete source for this project.

Start off by downloading the source code for the previous article. We're not going to rewrite that code, but we will be adding to it.
Unzip the code and import the project into Aptana, ColdFusion Builder, or your flavor of Eclipse based editors.
Open the file named DownloadFile.html
Add this CSS declaration into the style block at the top of the page #progressBar { border: 1px solid #000000; }
Just above the closing form tag, add this line of code Progress: <canvas id="progressBar" width="500" height="20"></canvas>
Save this file, and close it.
Expand the lib node, then open the file named Application.js
Locate the downloadFile function. Add these lines just above the stream.load statement
Finally, after the downloadFile function add this new function.

Here's how this works. The URLStream class fires off several events while it's downloading your selected file. We're already listening for the COMPLETE event; it's how we capture the complete data stream and save the file off. But if we take a look at the AIR API we'll see that there's also a PROGRESS event that we can listen for by calling air.ProgressEvent.PROGRESS. The PROGRESS event has two key values passed along with that we're using: bytesLoaded and bytesTotal. Having those two values allow us to calculate just how much of the file has been download.

Finally, because we're using webkit which has excellent Canvas support, we can draw a rectangle which displays our progress. This is a simple implementation, but it could be made as complex as you desired, or just about any shape you can imagine. What sorts of things are doing with AIR and HTML/JS? Are you using the Canvas tag for any portion of your application?

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

File downloading with Adobe AIR using HTML and jQuery

By changing var localFile = air.File[storage].resolvePath( fn ); to: var localFile = new air.File("file:///" + storage).resolvePath(fn); I was able to reference an sd card.

Phillip Senn - October 29, 2010 02:00 pm

That's one option, but not a good one. The problem with that approach is that it's not cross platform. Export that AIR application and anyone on a Mac or a Linux box won't get the reference.

Enough people have asked about this sort of thing that I wrote a blog post for it. Hope it helps you out.

andy matthews - October 30, 2010 04:17 pm

Hey I was wondering if this can be implemented so that I don't have to always put in the url in order to download.. for example if I need to download something I can just click the download button and it will download

MrStanFan - November 01, 2010 03:11 pm

Absolutely. If you review step 8 the previous blog post, you'll see these this line:
var url = $('#fileURL',$downloadFile).val()

That's the URL that you enter into the input field, but it doesn't have to come from a URL. You could print out a list of MP3s for example, then attach a click event to each one that passed in the URL. Something like this:


$('a').bind('click', function(){
	// get the URL from the href attribute of the link
	var url = $(this).attr('href')
	// and the location from the select box
	var location = $('#downloadTo',$downloadFile).val()
	// make sure we have a valid URL
	if (url==') {
		alert('Please enter a valid URL');
	} else {
		// trigger the download
		downloadFile(url, location);
	}
});

andy matthews - November 01, 2010 06:32 pm

thank you very much worked this

Fatih - January 16, 2013 01:35 am

Downloading Files with Adobe AIR, HTML and JS Part 2. Adding a Progress Bar with Canvas

Related Posts