Monday, April 28th, 2008

FancyUpload: Swiff meets Ajax

Category: Component, Flash, JavaScript, MooTools

<>p>FancyUpload

Harald Kirschner has created a new version of FancyUpload “a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar.”

A good example is the Queued Photo Uploader which is coded by:

javascript
< view plain text >
  1. var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
  2.     'url': $('form-demo').action,
  3.     'fieldName': 'photoupload',
  4.     'path': '../../source/Swiff.Uploader.swf',
  5.     'onLoad': function() {
  6.         $('demo-status').removeClass('hide');
  7.         $('demo-fallback').destroy();
  8.     }
  9. });
  10.  
  11. /**
  12.  * Various interactions
  13.  */
  14. $('demo-browse-all').addEvent('click', function() {
  15.     swiffy.browse();
  16.     return false;
  17. });
  18.  
  19. $('demo-browse-images').addEvent('click', function() {
  20.     swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
  21.     return false;
  22. });
  23.  
  24. $('demo-clear').addEvent('click', function() {
  25.     swiffy.removeFile();
  26.     return false;
  27. });
  28.  
  29. $('demo-upload').addEvent('click', function() {
  30.     swiffy.upload();
  31.     return false;
  32. });

Posted by Dion Almaer at 8:37 am
3 Comments

++++-
4.4 rating from 88 votes

3 Comments »

Comments feed TrackBack URI

Pretty nice! The UI updates are cool, sliding by percentage “milestone” for lack of a better word, rather than moving a few pixels on each progress update call or what have you.
 
Would you say this has fulfilled your wish, Dion, for a progressively-enhanced multi-file uploader? (I forget the exact wording.)

Comment by Schill — April 28, 2008

Is a jquery port possible?

Comment by Aimos — April 28, 2008

Its not so much porting FancyUpload to JQuery. Its Swiff that needs to be ported – that the Flash/Javascript wrapper that this uses, which is part of MooTools.

See: http://blog.mootools.net/2008/2/12/what-s-new-in-1-2-swiff

Comment by Unfocused — April 28, 2008

Leave a comment

You must be logged in to post a comment.