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;
-
});
-
4.4 rating from 70 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
Sweet! I’m working on a new site with MooTools (BSP: it’s http://www.myzog.com) and we’ve been wanting to improve the uploading for a while now. I think this might be just what we’re looking for. Particularly, we’re concerned with how clumsy it is to have users browse for an image, click upload and wait who knows how long with no progress indicator. We’re also using the default browse button because customizing it is such a pain.
It looks like this only works with MooTools 1.2 so we’ll have to upgrade MyZog first, in which case I may wait until 1.2 is out of beta. But, I hear that this is the final beta before it’s officially released, so it may be pretty stable.
In any case, thanks for the link and I will certainly be checking this out further.