Monday, April 28th, 2008
FancyUpload: Swiff meets Ajax
Category: Component, Flash
, JavaScript
, MooTools
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:
-
-
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
-
'url': $('form-demo').action,
-
'fieldName': 'photoupload',
-
'path': '../../source/Swiff.Uploader.swf',
-
'onLoad': function() {
-
$('demo-status').removeClass('hide');
-
$('demo-fallback').destroy();
-
}
-
});
-
-
/**
-
* Various interactions
-
*/
-
$('demo-browse-all').addEvent('click', function() {
-
swiffy.browse();
-
return false;
-
});
-
-
$('demo-browse-images').addEvent('click', function() {
-
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
-
return false;
-
});
-
-
$('demo-clear').addEvent('click', function() {
-
swiffy.removeFile();
-
return false;
-
});
-
-
$('demo-upload').addEvent('click', function() {
-
swiffy.upload();
-
return false;
-
});
-
Related Content:
4.5 rating from 87 votes
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.)
Is a jquery port possible?
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