Over the coming weeks and months, we hope to provide an occasional window into the more technical side of Increo’s products and share some of the more interesting challenges we’ve faced and problems we’ve solved with the greater web developer community.

The topic this week is Flash 10, but please let us know if there is another technical aspect of Backboard that intrigues you and you want to know more about!

Now, to the story:

Starting a few weeks ago, we began hearing some intermittent reports from users that they could no longer create a Backboard by uploading a file. They said they kept clicking the “Select File” button and nothing happened. 

We were understandably disturbed, as the ability to create Backboards is rather critical to the site… but despite numerous attempts, we were unable to reproduce the problem. We were busily working on brand new Backboard functionality, and the reports were infrequent enough that we chalked it up to a potential incompatibility with another browser plugin. Or maybe they just had Flashblock installed and didn’t realize it? Yep, that had to be the problem.

Flash matters because we use the excellent open-source SWFUpload package to handle document uploads on Backboard. This allows us to not only customize the appearance of the upload buttons themselves, but also display informative progress bars as the file is transferred. Being a tight-knit combination of Flash and JavaScript, SWFUpload takes a bit of work to configure and integrate, but the results are well worth it.

A week ago, we located a computer that exhibited the problem, and it was immediately clear that it was an issue we could no longer ignore: the other Flash that we use on the site worked fine, but the Select File button did nothing when clicked.

After a quick check on the SWFUpload forums for news of recent incompatibilities, the cause was immediately apparent. Unfortunately, the solution was anything but…

On October 15, Adobe released Flash 10, a substantial update to the ubiquitous browser plugin that brought with it a host of new functionality. From 3D rendering effects to strongly typed arrays called Vectors, Flash 10 greatly improves text, graphics, and media handling.

One of the most interesting new additions is limited support for keyboard entry while in full-screen mode. Flash 9 completely disables the keyboard for security reasons, but Flash 10 would allow us to support changing pages via arrow keys if we were to permit full-screen Backboard browsing.

Another security change in Flash 10 makes it no longer possible to display a file selection dialog without direct user interaction. At a high level, this makes perfect sense, as the user should never be surprised with such a dialog and accidently upload a file, but in reality this causes serious headaches. 

I will not dig too deeply into the pros and cons because they have been discussed at length. What matters is how to solve the problem that has dramatically affected not only Backboard, but also Wordpress, Flickr, Scribd, and countless other sites. The two primary solutions are to either place a transparent Flash overlay on top of the upload button, so that when the user clicks, they are actually clicking on a Flash object, or simply recreate the entire upload button in Flash.

Soon after Brendan Schwartz posted a modified version of SWFUpload that implemented the former solution, an official beta came out that focused on the latter strategy.

In our testing, both solutions worked equally well, with one extremely frustrating caveat: It was no longer possible to hide the Upload button once a file has been selected. Doing so (or causing any change to the DOM element containing the Flash object or any parent thereof) now causes the browser to reload SWFUpload from the server, breaking any connections and causing it to forget the file the user just selected. This was remarkably difficult to track down since the resulting error message (Invalid function name: StartUpload) could not have been less useful.

Here is our fix for the problem, allowing us to effectively hide the upload button without causing a reload.

First, create two DIVs, one to hold the upload button and one to hold the progress bar. You will likely want to style these so that they are the same size and display on top of each other.

<div id="swfUploadButton" style="overflow: hidden;">
	<span id="UploadButton"></span>
</div>

<div id="swfUploadProgress" style="display: none;">
	<!-- progress bar HTML goes here -->
</div>

The inner SPAN in the first DIV is what will be replaced by the Flash object when you initialize SWFUpload. Critically, the first DIV is styled with “overflow: hidden;” which causes any content that does not fit within its bounds to simply not be visible. Since the CSS height attribute’s default value is “auto”, the DIV will resize appropriately to fit the upload button.

The progress bar DIV is set to “display: none;” by default since we do not want it to be visible until a file is selected.

Then, when you start the file transfer, do the following:

$('swfUploadProgress').show();
$('swfUploadButton').style.height = 0;

We make use of Prototype’s convenience method to show the progress bar and force the height of the first DIV to zero, so that it’s content disappears from the screen. Importantly, do not make any other changes to the swfUploadButton DIV, especially altering its overflow value. In our testing, this caused the Flash object to intermittently reload. 

If your progress bar features some sort of cancel button, you can of course reverse the changes with:

$('swfUploadProgress').hide();
$('swfUploadButton').style.height = "auto";

Many thanks to the strong SWFUpload community for their preliminary investigations into the issue, and of course to Brendan Schwartz and Jake Roberts for their workarounds. Hopefully you will find this trick useful.