Multi-file upload using SWFUpload

SWFUpload

I heard a few times in the past about SWFUpload and recently I decided to try it out..

Basically SWFUpload is a 0x0 pixel swf that allows you to leverage Flash 8's upload mechanism through html/javascript. Not only can you let your users select multiple files to upload, it also allows you to catch the progress nicely, without a combination of nasty hacks with javascript, hidden frames and server-side callbacks.. It it distributed under the very permissive MIT license.

However, the integration went pretty bad.. SWFUpload is a very complete package and includes a big javascript wrapper, a bunch of examples and SWFObject, which is used to embed the object in the html using javascript and examples. For some reason it didn't work for me all, I assume there was probably some collision with my existing javascript.. and I don't really like SWFObject, as it has to my opinion overkill written all over it..

So, I peaked into the javascript, only to find out that just using the swf you have a lot of power already, you can specify your javascript callback functions straight from though the flashvars.. Neat! The flashvars look something like this:

  1. <param name="FlashVars" value="uploadBackend=%2Fservices%2Fupload&amp;uploadStartCallback=Uploader.onStart&amp;uploadProgressCallback=Uploader.onProgress&amp;uploadCompleteCallback=Uploader.onComplete&amp;uploadCancelCallback=Uploader.onCancel&amp;uploadErrorCallback=Uploader.onError&amp;allowedFiletypes=%2A.gif%3B%2A.jpg%3B%2A.mp3&amp;allowedFilesize=204800&amp;uploadQueueCompleteCallback=Uploader.onQueueComplete" />

Very easy to use.. The only thing I really miss is the fact that selecting files and uploading is a combined step.. Not really handy in terms of usability..

My feature requests:

  1. Have a separate method for selecting files before upload.
  2. Allow the ability to replace the file upload list, but also append to the list.
  3. Have the callbacks return index numbers for the files.. Right now the only unique property you get is the filename, and there could be situations where 2 files with the same name are uploaded (rare, but still..).
  4. Implement a method for canceling the upload progress.
  5. Implement a method to remove a file from the upload queue.

The other problem I ran into using flash uploads are http cookie bugs.. I covered that in my last post.

Sharing sessions between html and flash

cookieThis has been an issue that has been driving me pretty crazy.. I can't seem to find out how to share a (cookie-)session between flash and php.

The problem is that in certain situations Flash ignores session cookies when sending requests. The situations I know of are Flash Uploads and using Flash Remoting in internet explorer.

I asked my question on #webappsec and on the web application security mailing list, but there wasn't really somebody who could answer my quesion..

Options

  1. I can pass the session id using flashvars directly. Problem with this is, is that the session id is directly embedded into the html and can therefore be stolen using CSRF.
  2. I can use a temporary token, but anybody who has this token can do everything the user can in the flash application. For just the uploads it can work, but for everything else its not really flexible, and doesn't really fix the problem.
  3. I could turn off httponly cookies and pass the session id using javascript straight to the flash movie.. This could be me only option, but I dislike it because its not as transparent as it should be and requires additional logic using javascript and flash (and php).
  4. Force the user to login when using flash.. Not really a nice solution from a usuability perspective..

I'm wondering how other people go about this.. Is there a satisfying solution at all? Or can it only be done using a combination of nasty hacks?

wmode="transparent" in firefox

Well this is going to be a "don't do it!" post.

To make your flash movies transparent (so you can see the html content through your flash movie). You can specify a special param.

  1. <param name="wmode" value="transparent" />

If you specify 'opaque' instead of 'transparent' it apparently has the same effect.

However, firefox (and other mozilla-based browsers) have serious issues with this. The most important, in some cases the flash movie doesn't respond anymore to any input coming from your mouse. So that means users cant click your buttons and what else.. This guy seems to have even weirder problems.

So if you are targeting mozilla, avoid this setting.. there are no good alternatives at this point.


About

My name is Evert, and I've been writing semi-regularly on this blog since 2006.

I'm currently available for contract work.

more info.

Subscribe

Dropbox

Dropbox is a simple cross-platform online backup and sync application. The first 2GB of space is free, and both you and me get an extra 250MB extra space if you sign up through this link.