Tuesday, January 23, 2007

SWFUpload Revision 3 Demo

I've completed the major work on my third revision of SWFUpload. I've thoroughly taken the plunge and have made several modifications to the SWFUpload flash file. That, in turn, required several changes to the Javascript file.

I’ve added the following features:
  • SWFObject has been removed in favor of my Flash Feature Detection technique.
  • File Objects now include a unique ID. This is useful for working with the DOM.
  • It is now possible to cancel an upload-in-progress.
  • It is now possible to cancel all the files queued for upload (but not yet uploaded).

I have updated my demo to show off the new features. Again, I don't have a host. Contact me if you want a copy. It's based around asp.net but is easily adapted to any server technology:

Other ideas

I’d like to add a feature that allows you to remove queued files before the upload starts. Now that I have unique file IDs this should be pretty easy.

Trained the wrong way, but still trained

It occurred to me that SWFUpload does not quite fit in with the normal HTTP file upload format that we (and our users) are all used to. Usually we select our files and then probably have to fill in other parts of a form. Once completed we submit the entire form together. SWFUpload is breaking this up. Users might have a tendancy to click the Submit button before their uploads have finished.

I appreciate the benefit of starting uploads immediately. Users can finish the form while the upload is going and it'll all be more efficient. However, that’s not how users have been trained to use websites. They have been trained to complete a form (without looking at its labels). Then you pressing submit to back the message that says you did it all wrong. You trying again (and again) and finally getting it submitted.

With that in mind I think I am going to add one final feature. It will allow you to specify whether or not the queued-up files should be uploaded immediately or should wait until a command to upload is given. Now the user can queue up their files and fill out the form. The Submit button will kick off the SWFUpload file upload (the user still gets the great benefit of watching the file progress and getting feedback about the file size). The uploadQueueComplete event handler is called when the upload finishes and it submits the form. The page can watch for any SWFUpload errors and cancel the submit if necessary.

This is more in keeping with the expected user experience.

I'll keep ya'll posted. Yep, I mean both of you.


  1. Anonymous4:16 AM

    Great work!

    Could you tell me where i can find the filenames after uploading? As i want to put them in a database.

  2. The receiving end of the uploading is not handled by SWFUpload. You'll need an upload target (SWFUpload calls it the upload_backend).

    The backend_upload script should receive a form post and process the file as normal. In ASP.Net you use the Request.Files collection. In PHP you use the $_FILES array.

    SWFUpload passes two values to the backend script.

    1. The value "Filename" contains the files name. (PHP: $_POST array, ASP.Net: Request.Form collection)

    2. The value "Filedata" has the file contents. ASP.Net and PHP collect data about the file you can use in your scripts.

    Your backend script is where you should save the file to "the appropriate place" and do any database work.

    If you want to pass anything else then you need to add it to the Query String portion of the upload_backend value, e.g., instead of 'upload.aspx', you would use 'upload.aspx?id=1234'.

    Uploading Files in PHP

    Uploading Files in ASP.Net

  3. Anonymous5:07 PM

    I tried it and for some reason i could not receive the post data. Can you tell me what I might be missing?