subscribe

Multi-file upload using 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: 

<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.

Web mentions

Comments

  • Alex Egg

    Alex Egg •

    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
  • Evert

    Evert •

    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..
  • Evert

    Evert •

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

    Jamal •

    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 :)
  • Nate

    Nate •

    Why does swfupload not work with internet explorer?
  • Evert

    Evert •

    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..
  • Cecile

    Cecile •

    Hello,

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

    Thanks!
  • praveen

    praveen •

    werwer
  • Evert

    Evert •

    Cecile,

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

    Evert

  • Anonymous •

    i think it is 12. isn't it?
  • Activeideas

    Activeideas •

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

  • ajay

    ajay •

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

    Evert •

    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
  • ajay

    ajay •

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

    Evert •

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

    ajay •

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