Thursday, September 4th, 2008

Dojo Multifile Uploader with Flash

Category: Dojo, Flash

SitePen continues their work on Deft with a multi-file uploader:

The Dojo Toolkit now has support for multi-file uploads, thanks to the new Deft project. The dojox.form.FileUploader class embeds a hidden SWF file in the page which, when triggered, will open a system dialog that supports multiple file selection, and also file masks, which allows the user to filter their selection by file type.

Better yet, it’s fully degradable. If the user does not have version 9 or greater of the Flash Player installed it can, depending on the options you set, present the user with a standard HTML file input instead (or the option to install the latest Flash Player). The HTML form also supports multiple files, although due to browser restrictions, only one can be selected at a time. But they are all uploaded at once.

A major benefit to developers is the flexibility to supply your own styled upload button. For example, a paperclip icon toolbar button in an email application should not look like the standard file input with a text field followed by a “browse …” button. What inspired this design was working on projects where designers and clients would hand me a specification which would say, “the upload button looks like this“.

To use it? Fairly simple:

javascript

  1. var uploader = new dojox.form.FileInputFlash({
  2.     uploadUrl:"http.localHost/FileUpload.php",
  3.     button:myButton,
  4.     uploadOnChange: false,
  5.     selectMultipleFiles: true,
  6.     fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],
  7.     degradable: true
  8. });

Want to try it out?

This comes after the YouTube uploader that uses Gears.

Posted by Dion Almaer at 10:09 am
7 Comments

+++--
3.6 rating from 36 votes

7 Comments »

Comments feed TrackBack URI

No way, they did exactly what I am doing. I can even show the instant message logs talking about it. LOL, hopefully jQuery will have one soon enough.

Comment by iMarc — September 4, 2008

A head’s up, Flash 10 (currently RC) looks to prevent file selection dialogs when the user did not initiate the action by clicking on a Flash movie, a new (and reasonable, though inconvenient) security change – related discussion.
 
One possible workaround might be to layer a transparent flash movie on top of the “choose files” button, etc.

Comment by Schill — September 4, 2008

YUI has a flash-based file uploader as well:

http://developer.yahoo.com/yui/uploader

This is the same code that powers the multi-file upload interface on Flickr.

Comment by berylium — September 4, 2008

Any idea about possible limitation on the size of the files to upload (1Go, 2Go, no limits ?)

Comment by pvk — September 4, 2008

I feel sorry for the moron who doesn’t use any server-side validation against the allowable file extensions.

Comment by invalidreality — September 4, 2008

I prefer the Java uploader I wrote a while ago. Given the issues with Flash, I just prefer Java…

Mine is completely scriptable through JavaScript, and has many callbacks. It also calls a validation webservice before allowing the upload, and can call one after each file is sent. the ftp (or sftp) username / password and temp directory are all specified by the validation webservice at the time of upload, and not hard-coded in the applet. Freely available to all. (You’ll just have to sign the jar to get it to work, but you can self-sign)

Comment by bbroerman — September 4, 2008

An essential piece of functionality for me is the ability to scale images before sending them onto the server.

With digital camera resolutions constantly increasing and very few users with the means or inclination to scale images before uploading them, I think this is going to be a must.

The alternative is slower upload times and more processing on the server.

I’m looking at using Aurigma for precisely this reason, but would be nice to find an open alternative.

Comment by GalloNero — September 5, 2008

Leave a comment

You must be logged in to post a comment.