code tunes

SwfUpload is a graceful combination of flash and javascript that provides a mechanism for uploading files which is far more user-friendly than standard <input type=”file” />. It allows to upload many files at once and displays nice-looking progress bar.

Not everything works fine in every environment, though. Some problems are caused by the differences between some versions of flash player or even by bugs in flash players. Many of them can be solved, I wrote a post about it some time ago. But now when the Flash 10 came out, we have new obstacles to overcome.

Flash 10 is more restrictive about security issues that it’s predecessors. Now you cannot trigger opening file-select window from outside of the flash and it affects SwfUpload which used to do it from Javascript.

Thankfully, developers reacted quickly and are now working on new version (2.2) of the library. Alpha version is already out there and it deals with the mentioned problem. Since it is only alpha I recommend upgrading to stable version as soon as it comes out.

Here are inctructions how to reconfigure your app to work with SwfUpload 2.2.

First, download the most recent version of the library from SVN repository:

svn co http://swfupload.googlecode.com/svn/swfupload/trunk/core swfupload

You’ll only need two files from this: swfupload/swfupload.js and swfupload/Flash/swfupload.swf. These are the new version of files you should already have in your application. Replace old ones with these.

The new SwfUpload creates “Select files” button on it’s own, you only need to provide a placeholder for it.

<div id="swfuploadButtonPlaceHolder"></div>

The last thing is to update some Javascript.

swfu = new SWFUpload({
...
button_placeholder_id: "swfuploadButtonPlaceHolder",
button_image_url: "../images/swfupload/button.jpg",
button_width: "216",
button_height: "25"
...});

“button_image_url” accepts a path relative to the swf file. The image it points to, should look somewhat like this:

One image containing three states of a button (normal, on mouse over, on mouse click). You can have text instead of image if you want:

swfu = new SWFUpload({
...
button_text: '<span class="theFont">Upload</span>',
button_text_style: ".theFont { font-size: 16; }"
...});

That’s it. You can see working example I based on here.

If you find it useful, please share.

SwfUpload is a nice and easy to use javascript/flash library that resolves the problem of uploading many files at once to the server.

There are however some issues that sometimes make the experience of using the library a painful one. The problem come not from the SwfUpload itself, but rather from flash plugins installed on the browsers. Especially older versions.

One of the problem is that some of the plugins (Adobe’s Flash < 9.0 if I remember correctly) doesn't pass cookies during the upload, which results in lost session. Detailed description and possible solutions can be found around the web, for example here.

The other problem I came accross was that an user got logged out every time he uploaded a file with IE6. It was caused by User Agent mismatch when restoring session, so User Agent check had to be disabled for upload requests.

When it comes to using SwfUpload on Mac some new issues appear. One is a subdomain problem that causes a 404 error.

Couple of days ago I was hit by an error that took me all day to cope with. It was none of the above, the request seemed to be all correct, input data passed to an action (CakePHP application) was complete. The action itself didn’t work though. After quite painful debugging I found out that there was a port number appended to host name in $_SERVER['HTTP_HOST']. For an usual configuration it should not make any difference, however here it did and an absence of database connection was that difference.

The application gets deployed to more than one server and database it connects to depends on the server. The code that determines database hostname relied on the $_SERVER['HTTP_HOST'] variable and didn’t care about port numbers. As it appeared it should have!

I didn’t see such a problem described anywhere else, so I decided to share. Hopefully this can help someone few hours of work.