Friday, June 15th, 2007

FancyUpload with MooTools

Category: Component, Flash, JavaScript, Library, MooTools

Harald Kirschner has released FancyUpload:

Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars.

It features:

  • Select and upload multiple files
  • Filter files by type in the select dialog
  • Optional Events to add your own behaviour
  • Show and filter useful file information before the upload starts
  • Limit uploads by file count and/or file size
  • Platform and server independent, just needs Flash 8+ (> 95% penetration)
  • Unobtrusive, since the element is replaced after the swf loaded successfully
  • Cancel running uploads, add files during upload
  • Everything is optional, documented and easy editable

You can try it out, along with Harald’s AutoCompleter and History Manager.

Posted by Dion Almaer at 7:55 am

4.3 rating from 105 votes


Comments feed TrackBack URI

Mootools developers all over the web are making awesome plugins. Fellow developers can join us @

Comment by Eric — June 15, 2007

Brilliant! I want to have a go at making this a WordPress plugin for image uploads in posts.

Comment by johno — June 15, 2007

I’m wondering…

Considering that (repeat with me) having diversity is a Good Thing and that we have at least 3 or 5 most-used JS libraries with pretty much equal share… Has anyone advanced the idea that porting good ideas between them would be a good thing? Ext has done it and it’s been fantastic. I think it would be a nice thing if we pushed that things were made in the top three or five libraries so users can choose if they want a drag and drop solution and we can also compare implementations and speed results.

Right now, on addons alone, Prototype probably wins hands down. I don’t think most of them can’t be ported to use Moo or jQuery.

Comment by Eduo — June 15, 2007

ps: it’s so good, it almost brought tears to my eyes. great job Mootools.

Comment by johno — June 15, 2007


Comment by Калоян К. Цветков — June 15, 2007

Brilliant work, really nice polished feel to it! Thanks Harald!

Comment by Ben — June 15, 2007

What kind of license is this being released under? Can it be used in commercial projects?

Comment by Mike Ritchie — June 15, 2007

Eduo – I agree, the mootools fx transitions always seem to be smoother than those in scriptaculous, but the as-standard combined feature sets of prototype/scriptaculous leave moo in the dust, which is a shame because it’s syntactically more pleasant (imo), and has some really neat tricks.

Comment by Ben — June 15, 2007

Mike – it’s MIT licensed, as it says on the page. Use it in what you want :)

Comment by Ben — June 15, 2007

From Eric’s comments it sounds like MooTools is building up quite a cult following. I’m starting to regret my choice of jQuery as my standard library.

Comment by Jordan — June 15, 2007

Ben: Yeah. I tried not to imply preference for any. I just feel it’s a loss to have people in the dust because, as Jordan did, they had to chose one library for their projects.

I think it would be a good exercise if new routines like this one came out in versions for the different libraries (or linked to them) so users of other libraries can take advantage of the functionality, even if it’s not the preferred or best environment.

I think it can only help. I don’t see how it could be a negative thing (I included “link to them” because I understand a developer may not want to bother with other libraries, but others may be inspired by him).

Comment by Eduo — June 15, 2007

Great work Digitarld!

The innovation and smoothness of MooTools and its plugins march on!

Comment by RossC0 — June 15, 2007

FINALLY! Good job digitarald! Gonna go blog this now.

@Eduo, I think this wish (that plugins be released in numerous frameworks) is a nice dream, but it would mean that the developers of these plugins would need to get expertise for each framework. Digitarald (and myself and others) do a lot of research and then choose a framework that we like the most. We’re contributors to Mootools (and, fyi, previous hard-core users of Prototype) and we’ve chosen Mootools because we believe it’s best suited for our work. We’d rather spend time supporting that community and building more plugins and tools (and contributing to the framework) than rewriting our work 5 times for others who have chosen a different path. It’s not about competition or selfishness as much as that it’s just impractical.

I’d rather see us (all of us as a community of ajaxians or whatever) create a sorceforge-esque repository for these plugins. The most used plugins would likely get ported based on demand and those contributing to the forge would each contribute in the framework they prefer. So if you use prototype and Digitarald releases a fancy upload script you wish you could use, then you could refactor it for Prototype and upload it. Now users get two download options.

Wishing that the developers like Digitarald take on this task doesn’t really have a hope of coming true, because he or I or you don’t have any incentive to do that. By way of example, I’ll point at Lightbox; an awesome idea that was well implemented that’s been ported numerous times now. If only there were one place that held all the lightbox ports in a single Lightbox home page… a forge would do that…

Comment by Aaron Newton — June 15, 2007

@Eduo: The (r)evolution is on it’s way. Where today, people are choosing libraries, tomorrow it will be about platforms. A good platform will act as an integration point for a developer to pick and choose what they want from each library/framework (think drag out this mootool uploader component and mash it with your favorite jquery piece, and then you want an Extjs tabpanel…). The platform will also act as a collaboration tool, and the best will enable instant distribution and have built in monetization tools. This is coming… :-)

Comment by Ryan Gahl — June 15, 2007

God bless you! What a beautiful tool!!! I really can’t wait to ajax up my software with all these cool things. wow. thank you thank you.

Comment by Liming Xu — June 15, 2007

Woohooo, it’s real! FancyUpload is finally released ^^;;
Nice work Digi!

Comment by nagaozen — June 15, 2007

Nice work indeed.

I had already implemented a similar thing with Prototype and SWFUpload ( for

But the code somehow breaks in Linux. I tried to figure out the cause and I guess its because the Flash Player in Linux doesn’t respond to HTTP 302 in the same way as it does for Windows or Mac.

Comment by Lalit Patel — June 16, 2007

this is really cool, many thanks!
I’d also like to see a ‘port’ to Prototype (and Dojo)

Comment by Mark — June 17, 2007

I don’t really like needing flash for uploading a file. I hope this is still usable for users who are not using flash ?

Comment by Skateinmars — June 17, 2007

Skateinmars: The reason for flash is not because of the flashiness (hah!). It’s because it allows for bidireccional communication while uploading and grouping of files before upload (someone correct me here).

If I remember correctly using Flash was actually a workaround to the limitations of normal HTML+JS alternatives.

Comment by Eduo — June 18, 2007

Not as glamorous, but still extremely impressive, that history manager the article linked to is a much needed feature. I hope that gets integrated into mootools mainline code.

Comment by Matthew Nuzum — June 18, 2007

4 day vacations in BCN, came back and saw this … nice :)

@Skateinmars: Of course its also possible with iframe, but a process bar is only possible with a server backend that can read the status of an onoging upload (e.g. Merb) or Flash. IFrames can make an hidden upload and even queued uploads (like in FancyUpload), it would be a real simple script (I did it some time ago with plain JS without framework).

Since I code all my plugins for my own projects, then refactor them and release them as open source, its not very possible that I will port them to other frameworks, as long as I don’t switch to another framework (which is very unimaginable). But the code is (imo) clean and readable, so a port should be no problem ;)

Comment by Harald — June 19, 2007

Too bad the Mootools guys are all a#$holes

Comment by Jones — June 20, 2007

Wow, after using mootools for 9 months, and converting to jQuery I will NEVER GO BACK.


Comment by w00fz — June 20, 2007

That’s not me.

Comment by w00fz — June 20, 2007

Seems like some child has real attitude problems. Want to say sorry that this is in the comments for my script.

Enjoy FancyUpload, MooTools and their really nice community. *hugseverybody*

Comment by Harald — June 21, 2007

Does this not work on Flash 9? I’ve tried it on a mac in FF2 and Safari as well as an XP machine in both FF and IE, no flash. ??

Comment by Robert — July 2, 2007

What’s the problem with mootools guys? :P

Comment by wappy — August 13, 2007

I was wondering if there are any tutorials online regarding on how to implement this? Also I want to use it with Django web framework.

Comment by kris — August 14, 2007

following my previous post…

can you send me an email please if you know any tutorials.

Comment by kris — August 14, 2007

Here is the Fix to the relative URL, now it will accept absolute and relative URLs

just replace FancyUpload.js with this one.

Comment by anger98 — December 6, 2007

I’ve compiled all the necessary tools and scripts to get FancyUpload working, which I hope will help the newbies:

Comment by xanadu — June 28, 2008

Leave a comment

You must be logged in to post a comment.