Downloadify: Client-Side File Generation Using JavaScript and Flash
The following tools is in its very beta stages and works intermittently. Its so damn useful that I had to show it off now though!
I recently stumbled upon Downloadify, a client-side file generation tool based on JavaScript and Flash ActionScript code. A huge advantage to creating files on the client-side is that you can reduce the load on the server -- especially when there's no need for the server to get involved (the data is available within the page, etc.) Lets take a look at how we can use Downloadify.
Downloadify Usage
Downloadify.create('downloader',{
filename: function(){
return 'secret-message.txt'; //static file -- you could retrieve from form input box
},
data: function(){
return 'MooTools FTW!'; //static content -- you could retrieve from form input box
},
onComplete: function(){
alert('The file has been saved!');
},
onCancel: function(){
alert('You have cancelled the saving of this file.');
},
onError: function(){
alert('Error! Damn!');
},
transparent: false,
swf: 'media/downloadify.swf',
downloadImage: 'images/download.png',
width: 210,
height: 55,
transparent: true,
append: false
});
Downloadify provides numerous options which you may pass per instance within the create method -- this should look familiar to notice to advanced JavaScript users. What I really love about Downloadify is that it provides just the right amount of customization -- events and filename/content settings. Too many JavaScript classes/functions try to do too much; Downloadify gets it right. My only criticism of Downloadify is it's requirement of a 4-state sprite; it would be great if that were an option or the ActionScript could detect the height setting vs. the image file's actual height and use the sprite if available.
MooTools Helper
/* mootools helper */
if(typeof(MooTools) != 'undefined'){
Element.implement({
downloadify: function(options) {
options = $merge(Downloadify.defaultOptions,options);
return this.store('Downloadify',Downloadify.create(this,options));
}
});
}
Downloadify comes with a jQuery helper but not a MooTools helper...I've remedied this.
Downloadify fills a need for many developers. Avoid unnecessary server load and jump on Downloadify!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Now that is something useful (hey, I’m not saying the rest isn’t)!
I always wondered if that could be done client-side, instead of downloading an already existing file on the server.
As the tool get more and more supported, I hope to see more “usage-exemple” of it.
Great tool and thanks for the MooTools helper, that seems to be something lacking of a lot of addons I find. I think I’ll get a lot of use out of this. By the way, should that transparent option be in there twice?
Hey David! I was super excited to see you post on this! I’d love to discuss the intermittent issues with you and see if they can’t be resolved. Also, can I add your MooTools helper to the core Downloadify download? I started to work on adding it originally, but I haven’t worked with MooTools in such a long time :(.
I am about to start work on getting it to support saving binary files, and hope to put together a demo combining it with JSZip to dynamically create zip files containing full directory trees and files.
Thanks again for covering the project!
Hey Doug!
Great work on the project! A few things:
1. The intermittent issue was on Windows XP. And I think it was flat out deciding not to work. I’ll look at it more tomorrow.
2. Definitely add the MooTools helper! I just retested it and it works wonderfully.
Be sure to keep me up to speed on the project — it’s something I was so happy to see that I almost cried! :)
David
I must be missing something. I understand that this script’s advantage is to reduce the number of calls to the server by allowing to download (most likely small) files containing informations which are already available on the page/in the DOM. It might be useful in some very specific usage (for example a popular SNS which would allow to download vcard files or an intranet with accessed with javascript-enabled and flash-enabled browser (sounds like a dream)) but pretty useless or even harmful in general since Downloadify consists of two files with a total size of 5ko/KB (most likely more than the file’s size). That would mean two http requests to the server even if the user doesn’t actually want to download the file. There would also be our actual “content formatter” script which could get quite lengthy.
As I said I must be missing something. Reading about any real world use could be enlightening.
This should be doable without Flash.
Right click here and select ‘save to disk’
Okay I didn’t expect this crap to actually parse HTML.
Second try:
<a href=”data:text/plain,Hello world”>Right click here and select ‘save to disk’</a>
@Nicolas: There seems to be large misunderstanding of the limitations of data URI’s. First there is limited browser support. Second, you cannot pre-supply a file name. Finally, having worked for the last number of years to make sure a user never has to “right click and choose save” to download by setting proper headers, etc, it sure feels like 3 steps backwards in the interest of progress.
I think browsers will get there eventually, but I really think we are a few years out to get what I consider serious usability issues worked out as well full cross-browser support.
I agree with Kevin, can you give a real world example of its usefulness?
@brett, @Kevin: Easy. I hope to use this on my site site. Look at 95% of my posts. I have code snippets everywhere. I’d love to offer a “download snippet” link which would use Downloadify. I find it hard to believe you couldn’t thing of a use for this.
@David Walsh: Though I wonder what the added bonus of using this over the tried-and-proven method of letting your language of choice crank out the proper headers to trigger a file download. Thoughts?
@Dave: This isn’t a replacement for that method at all. This is so front end functionality (for instance David’s code snippets) can be downloaded without server interaction. If David wanted to add that functionality without Downloadify, he would have to post every snippet back to the server before he could trigger a download of the data.
One benefit of this is that the download triggers instantly. On an overtaxed server, and when data can be repurposed on the client side, this will greatly increase speed to download.
The sample project that uses this as a good example is http://starter.pixelgraphics.us It is a plugin starter for jQuery. Once the page loads, the user can generate as many variations as they want without any trips to the server.
@Douglas Neiner: Ok, that makes sense, didn’t think about it like that :)
I tried initiating the downloadify object with the Mootools Swiff plugin, but had not success. Is it possible to do so?