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.


16 Responses to Multi-file upload using SWFUpload

  1. 386 Alex Egg 2007-02-24 4:18 am

    Hi,

    Regarding your request list:

    1. Can you elaborate on what you mean by this?
    2. No comment...
    3. no comment...
    4. (Not a SWFUpload issue) This functionality is trivial, and is already available from the Flash FileRefrence object -- which facilitates the whole uploading process.
    5. I agree

    Also, I have been recently considering the use of SWFObject and was wondering if you could elaborate on your comments about it being overkill. I've never used it and would like your opinion about it.

    Thanks,
    Alex

  2. 387 Evert 2007-02-24 4:45 am

    Hi Alex,

    What I meant is for example a
    ->selectFiles()
    and a
    ->uploadFiles()

    method..

    There would have to be a js-callback that can pass all the filenames after selectFiles()..

    When I have those methods, I can let the user flow go like this:

    1. User selects files
    2. User fills in additional information (title, message, etc..)
    3. User hits 'go'

    This is more intuitive, as this is what people are used to.. This would also allow you to correct mistakes (user selected the wrong file)

    About point 4. I understand its there already.. My thing is that I would like a javascript interface for this ;)

    As for the while swfobject thing.. The applications we build have a really simple flash detection and don't need 75% of swfobjects features.. The script does the following:

    1) detect if the user has flash 7 or higher
    2) if not, display a

    with a warning message + link
    3) script doesn't touch embed tags, we simply use standard compliant xhtml embedding and for posting videoplayers through blogging api's we use macromedia's way..

  3. 388 Evert 2007-02-24 4:46 am

    Oops, I meant to say adobe's way..

  4. 385 Jamal 2007-02-27 8:13 am

    Well, I made this multi upload thing, you can get a idea how to do..

    http://www.ads4arab.org/upload_multi_files.rar

    any question, you can mail me :)

  5. 380 Nate 2007-03-16 5:14 pm

    Why does swfupload not work with internet explorer?

  6. 381 Evert 2007-03-17 5:44 am

    It should work with IE! I tried flash 8 uploading a bunch of times with IE, and it worked, for sure..

    Didn't try it out SWFUpload specifically with IE though.. I should probably start doing that..

  7. 382 Cecile 2007-04-21 6:26 pm

    Hello,

    I don't know anything about flash, how do I integrate SWFUpload in a php or htm page?

    Thanks!

  8. 383 praveen 2007-04-27 10:12 am

    werwer

  9. 384 Evert 2007-04-27 3:48 pm

    Cecile,

    I'd recommend going to the SWFUpload page and follow their instructions..

    Evert

  10. 379 Anonymous 2007-06-15 3:13 am

    i think it is 12. isn't it?

  11. 375 Activeideas 2008-03-07 2:54 pm

    we can pass var on same time while uploading file through flash ( FileReference ) see details here http://www.activeideas.net/article/FileReference

  12. 374 ajay 2008-09-23 10:56 am

    I dont understand why it's not working with IE. It working all other browsers (mozilla, Opera, safari etc). Anyone knows, Please help

  13. 373 Evert 2008-09-23 1:51 pm

    Hi Ajay,

    I had trouble gettign this to work when the swf was inside a form tag.. So yea, just make sure its not (but not sure if this solves it for you).

    Evert

  14. 376 ajay 2008-09-24 2:47 am

    Evert, Thank you for your response.But its not working. The upload button + cancel button also not seen. (Only in IE)

  15. 377 Evert 2008-09-24 2:50 am

    Then I would suggest going to the swfupload authors or a public forum such as sitepoint..

  16. 378 ajay 2008-09-24 5:06 am

    yes. i got it. it happen becoz, we need to install flash player for IE. Then it will work



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.