dcneiner/downloadify

A tiny javascript + Flash library that enables the creation and download of text files without server interaction.

Downloadify: Client Side File Creation

Important! The swf has been compiled for online use only. Testing from the file path (i.e. file:// ) will not work as it will violate the security sandbox.

Overview

This library is a tiny JavaScript + Flash library that allows you to generate files on the fly, in the browser, without server interaction. Web applications that allow you to generate vCards, color palettes, custom code, etc would benefit from using this library. In addition to increasing speed (no round trip to the server) this solution can reduce the database and server load of existing web applications. This is not a library to ‘force download’ a file from a server. It does not interact with a server at all.

Demo

A very simple demo is available that lets you supply your own content and filename and test out saving, canceling, and the error functionality when the file is blank.

For a real world usage, see Starter for jQuery . To quickly demo the usage, just click “Load Example Data” then click Download. After the initial page load, no further contact is made with the server. Everything happens on the client side.

Download

Please download from the Downloads section of this project.

Support

For support, please use the Issues section of this project. You can also try to hit me up on Twitter at @dougneiner but I might just ask you to file an issue. :)

Dependencies

The end user must have Flash 10 or higher installed for this plugin to work. As of September 2009, it was at a 93% saturation, so most users should already have it installed.

Downloadify is only dependent on SWFObject 2.0 which is included with the download. It is compatible with any JavaScript framework but has a helper for both jQuery and MooTools. Neither helper will be activatd if Downloadify is inserted prior to including the framework library.

Usage

Any JavaScript framework:

Downloadify.create( id_or_DOM_element, options );

jQuery:

$("#element").downloadify( options );

MooTools:

$("elementid").downloadify( options );

Options

Unless you are using the jQuery plugin included with Downloadify, you must supply all required options with your call to the Downloadify.create function.

Defaults and Required Options

• swf: ‘media/downloadify.swf’ Required
  Path to the SWF File. Can be relative from the page, or an absolute path.
• downloadImage: ‘images/download.png’ Required
  Path to the Button Image. Can be relative from the page or an absolute path.
• width: 175 Required
  Width of the button (and the flash movie)
• height: 55 Required
  Height of the button. This will be 1/4 the height of the image.
• filename: Required
  Can be a String or a function callback. If a function, the return value of the function will be used as the filename.
• data: Required
  Can be a normal String, base64 encoded String, or a function callback. If a function, the return value of the function will be used as the file data.
• dataType: ‘string’
  Must be a String with the value string or base64. Data paired with the dataType of base64 will be decoded into a ByteArray prior to saving.
• transparent: false
  Set this to true to use wmode=transparent on the flash movie.
• append: false
  By default the contents of the targeted DOM element are removed. Set this to true to keep the contents and append the button.

Event Callbacks

No data is passed into these functions, they are simply called.

• onError: Called when the Download button is clicked but your data callback returns "".
• onCancel: Called when the Download button is clicked but the user then cancels without saving.
• onComplete: Called when the Download button is clicked and the file is saved to the user’s computer.

Setting Up the Image

Downloadify supports (i.e. requires) three button states with limited support for a fourth. The states are:

• Normal
• Over ( When the mouse hovers over the button )
• Down ( When the button is pressed )
• Disabled ( Limited support, when .disable() is called on the Downloadify.Container object )

In trying to keep this plugin as simple as possible, all four states are always assumed to be present. You should prepare your button image as a single image the width you want your button, and four times the height of the button. All four states should then live in that one image in the same order as the previous list from top to bottom.

Potential Issues

When working with different button images, you may find Flash has cached your image. This is the desired behavior on a live site, but not during development. To get around this, simply supply a ?rev=1 or ?rev=2 etc on the end of your downloadImage url.

Compiling Notes

I develop locally using Xcode and the Flex 4 SDK Beta 2. Please do not submit request on how to setup a local testing environment. If you are interested in my Xcode project files, send me a message.

Developers

Core Developer: Doug Neiner

Contributors:

• David Walsh — Contributed the MooTools helper

Change Log

• Version 0.2:
  • Added support for base64 via the as3base64 Library
  • Added dataType option
  • Added MooTools helper (Thanks David!)
  • Upgraded SWFObject to v2.2
• Original Release: Version 0.1

License Information: MIT

as3base64: Copyright © 2006 Steve Webster

All Downloadify Code: Copyright © 2009 Douglas C. Neiner

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

downloadify's Issues

Fails silently if it can't GET the swf or downloadImage

This could happen if the user has lost the network connection when the downloadify button is requested. I'd like a way to catch this error to present a message to the user.

Related to #21 but more serious, and should be fixed.

Thanks for the plugin, it works well otherwise.

Regular button or <a> link instead of Flash image?

Hi folks!

Is it somehow possible not to show Flash image with painted button but invoke Save As dialog by regular clicking on a form button or an "a onclick" link instead?

Thank you!
Martin

No argument for error callback?

There's an event, onError, for downloadify. Unfortunately, it does not have any arguments to determine what the error is. This means that, once again, debugging is impossible.

Please do not that my data callback could not return "" as stated in docs. The problem I encountered happened for a button with data set to static string.

Allow resize of Flash shim when browser zoom level is changed

The AS line:

stage.scaleMode = StageScaleMode.NO_SCALE

appears to keep the Flash shim from rescaling the button image when the browser's zoom level is changed. At the moment, when the zoom level is changed, the button does not resize, leading to rendering issues.

Would it be possible to add a small event handler that resizes the button image along with the parent div, when the zoom level is changed?

Fails silently on invalid filename

If there are invalid characters in the filename (such as forward slashes), Downloadify fails silently; it never shows the dialog but doesn't call onError or onCancel.

This doesn't really warrant a bugfix IMO; just noting it here so people know to do verification of filenames themselves if they're accepting user input.

Thanks! (Great project).

Button gets stuck

Download button gets stuck in a certain scenario.
To reproduce it, use this :
Click on a flash button and move cursor outside of it without releasing a mouse key.
Once cursor is out, relese the mouse key.
Button stays stuck in 'Clicked' state.
I used the downloadify's own demo to reproduce the issue.

Uploadify does call data and fileName callbacks but no dialog appears - google chrome

For some reason, uploadify does not produce dialog in Google chrome. On the same page, the Firefox has no problem.

Worst of all, not only that no errors are produced, but no of the onError, onCancel or onComplete callbacks is called. It simply seems like calling the dataCallback was the last thing the flash did.

This is quite a problem, because there is no way to use fallback when no error is called.

downloadify.js line 91 yields Unknown runtime error in IE8

I am unable to get this to work in IE8 due to the following Javascript error being reported:

Message: Unknown runtime error
Line: 91
Char: 34
Code: 0
URI: http://localhost:8080/downloadify.js

I am puzzled as to why IE is complaining (Chrome works). Is there something special about this line?

Image Display with Zoom Level

I am using a 140x30 image for the button graphic. So actually I am giving it an image that is 140x120. In IE (the only browser this code is being used in) when the user sets the zoom level to something other than 100% this button looks terrible. At 200% zoom you end up seeing 2 button states at once. at 50% zoom you see half a button.

Popup appears and is unusable, after several seconds it crashes (or closes)

I am able to launch the plugin. I see the same save file dialogue that i see in the demo. When i hover my mouse over the plugin, it shows spinning wheel (like it is thinking). After a few seconds it just disappears or crashes. Can't find any error log or evidence that there was an issue.

Downloadify does not work when the image dimensions are broken

I was trying to create invisible downloadify button, in the same manner in which classical upload file fields are being styled - making it transparent and hovering it over styled HTML elements.

My HTML button was 64x64 pixels, so I created 64x64 transparent image in hope it will work. Instead, it chaotically blinked and click event was never launched.

Since no errors were thrown (again) it took me quite a long while to realise what's wrong, and after creating 64x256 the flickering was fixed (but the flash still does not work).

Does not throw errors

As of my experience, there are two kinds of frameworks. One, that after installation (adding to the site) throws a bunch of errors - and in time you get these fixed.

The other kind throws no errors, but still does not work. And one has no other option than giving up after trying all he could thing of.

If there were any errors, I could try to figure out, why the only thing Downloadify does is creating an empty span element.

Binary data in a string makes the download button to fail

I'm using downloadify to save image data which is a binary string, this causes the download button to fail to popup the save dialog, this is tested against the online demo.

I will attach some data that causes it to fail (just paste it into the Downloadify Example.

enhancement request: "loadify" load-from-file?

Would you consider adding support for a client-side load-from-file feature? My naive reading of the doc suggests this could be done using FileReference browse() and load() Thanks!

Combine Downloadify with FileSaver.js?

It seems like a good idea. How do you feel about it? We're both MIT-licensed.

Weird URL Request

Im using jquery/coffee-script here is my instantiation:
246 ('#template-link').downloadify
247 filename: ->
248 @campaign.get('name') + '-.csv'
249 data: ->
250 $('#data-field-headers').val()
251 swf: ->
252 $('#downloadify-url').val()

When i load he page, the browser trys to make a request to:
http://localhost:3000/function%20()%20%7B%20%20%20%20%20%20%20%20%20%20return%20$('

why?

Download via keyboard instead of mouse click

This might not be possible as explained in issue #6, but I thought I would mention it. I want to use the keyboard to tab to the element I have downloadified, and then use the Enter key to trigger the download.

Fix for save in UTF

I use this code to make posible save in UTF-8 with BOM fotmat. (Jast repalce function)

---

protected function onMouseClickEvent(event:Event):void{
  var theData:String  = ExternalInterface.call('Downloadify.getTextForSave',queue_name),
      filename:String = ExternalInterface.call('Downloadify.getFileNameForSave',queue_name),
      dataType:String = ExternalInterface.call('Downloadify.getDataTypeForSave',queue_name),
  b:ByteArray=new ByteArray;

  if (dataType == "string" && theData != "") {
b.writeByte(0xEF);
b.writeByte(0xBB);
b.writeByte(0xBF);
b.writeUTFBytes(theData);
    file.save(b, filename);
  } else if (dataType == "base64" && theData){
    file.save(Base64.decodeToByteArray(theData), filename);
  } else {
    onSaveError();
  }
}

---

Thx

Auto Open File for ID10Ts

I have an issue where my users downloading the file and they can't find where they put it. It's an ID10T problem, I know.

How about adding an autoOpen: true option so these files auto open when the download is complete?

Thanks.

Downloadify won't work when openning local file directly on your browser.

I've tested this on two environments. Downloaditify won't work if you open your site locally. No error. Nothing happens.

downloadify

downloadify not available on download page even though I signed up

Downlodify is not working, no error message at all

I have the latest shock wave (11.9.900.117) add-on installed to my Firefox (24).

When i download and run the sample test.html file nothing is happening.But when i run the same demo linked (http://pixelgraphics.us/downloadify/test.html) HTML from Git hub works as expected.

Also i have tried this with my project too, same kind of output, nothing happens but the button hides.There are no error messages shown or can be caught since i cant go through the swfobject.js file.

I am using javascript alone, not jquery etc.

Is there anything that i am missing some basic stuffs?

Posted in http://stackoverflow.com/questions/19573697/downlodify-is-not-working-no-error-message-at-all too.

Thanks in advance.

Add onClick event

When a large file is to be generated it takes some 4-5 seconds to do so. Since no change on web UI is made, user may think that he didn't click the icon, and try to click it again. To prevent this, I would like to suggest you to add one more event, onClick that will be fired before getTextForSave.

I think changes should be done in those two files:
Downloadify.as
add on line 144:

ExternalInterface.call('Downloadify.callOnClick',queue_name),

downloadify.js
add on line 32

callOnClick: function(queue){
  var obj = Downloadify.queue[queue];
  if(obj) obj.click();
},

add on line 176

base.click = function() {
  if(typeof(base.options.onClick) === "function") base.options.onClick();
};

Also, note that I have tried to make UI changes in data event, but for some reason they are not shown until data generation has been done.

Downloadify and Remote Binary Files

If I have a binary file located at http://example.com/foo.exe and I wish to save it as bar.exe, how can I accomplish that with Downloadify?

How to save image ?

I want to save image instead of text. I have image with id="image_test" . Please give me the solution.

Allow Downloadify to run in offline mode

I need the swf file to work in offline mode as my application is not served from webserver, but instead distributed as html file. Is there any way to allow file:// access to Downloadify?

Button doesn't appear

Hello,

I'm trying to use Downloadify for browsers that don't support blobs. I am using JSzip for downloading a zip of user-selected files.

I have my page set up to check for blob support and, if none, it should use Downloadify for the download. However, I'm not getting the image to show up. I can see by inspecting the page that the flash object does get generated, but it is hidden, even though it's got "visibility:visible" set at the element level.

I'm using absolute paths to the image and swf. I do not get any of my test alerts from my filename and data functions.

Any help would be appreciated. Thanks!

Hangs in IE8

When I add Downloadify with the following code
window["Downloadify"]["create"](strId, {
"filename": "responses.csv",
"data": fnGetCsvResponses,
onError: function%28) {
alert('Error');
},
"transparent": false,
"swf": 'http://obsurvey.com/js/external/downloadify.swf',
"downloadImage": 'http://obsurvey.com/js/external/download.png',
"width": 100,
"height": 30,
"transparent": false,
"append": false
});
It just hangs in IE8. IE8 appears to be loading, but the download image never appears, it's just a white blank space. The same code works fine in Firefox and Chrome... I've tried changing transparent and append, but that changes nothing.
You can see it live here:
http://obsurvey.com/Obsurvey.aspx?uid=d94feb5d-952d-4541-a43c-73371e095d53
When you click "Individual responses"
The save file works in FF & Chrome, but not IE8. (looking at innerHTML IE has no params for the flash object)
I updated swfobject.js to the latest version 2.2, now everything works in IE and Firefox. In Chrome the "Save to disk" graphics comes up, but when you click it nothing happens.

No download button in firefox and safari

trying the very simple demo example page but the save/download button doesn;t show up in firefox or safari? It does show up in IE and Chrome.

button position

ok i have some css positioning working, but what i really need it to place downloadify into my nav div(which seems to break the button)
I know how to position the downloadify button around the screen but I want to add it to my nav tag

but when i tried to append or prepend it into my nav downloadify broke

Download link doesn't seem to work.

The link in 'Please download from the Downloads section of this project' leads to an empty page just saying 'There aren’t any uploads for this repository.'

weird file locking

I am currently exporting a file as a CSV, and downloadifying with great success

However..

If you have the same-named file open in MS Excel, downloadify will ask if you want to replace, and then die, firing 'onCancel' rather than 'onError' as Excel is doing something to prevent you saving over the active worksheet (and I guess this is presenting itself as a cancelled save).

I am not sure what it is, but the same is not true for files open in a text editor. Seems to be a Microsoft special.

Not a big deal, just letting you know the problem exists

Using a different download .png doesn't work

When i use a different png file other than the included download.png file, nothing happens when i click the image.

Can user open instead of save

Hi,
Downloadify looks like it will work great, but my users want to just open the excel file.
Normal download things have the choice of "Open" or "Save".

Is there any way to "Open" the file when they click the button?

Thanks,
Brita

Large (12 million-ish) character files bug character encoding

This might be slightly difficult to explain, but here I go! I have a string that was written into using ISO-8859-1 encoding (and it seems to maintain that encoding since logging the string properly shows the Î character). If I keep this string short, say 500 characters, downloadify writes it to a file perfectly (which you can test by simply putting the Î character in the web demo) .

However, if the string is very long (I tested with 12 million characters, just because that's the length my file actually was), it changes Î to ÃŽ, and other characters to other things. However, every normal ASCII character is written properly.

I realize this is an extremely obscure problem, so please let me know if it's not worth fixing so I can try to find a work-around.

Thanks!

Save file without prompt location

How to save the file to any predefined location (with JS variable) without prompt "save As"?

Downloadify Flash not displayed on IE8 (8.0.6001.18702)

The flash file is not being displayed on IE8, it works fine on Mozilla and Chrome. This issue also occurs with the Downloadify demo at http://www.downloadify.info/downloadify/test.html. I tried setting the 'transparent' parameter to false, but no luck. I am using the latest build of Downloadify with SWFObject 2.2.

UTF-8 doesn't supported when export to excel file .xls

I used Downloadify to export content to excel file .xls, but it seems UTF-8 doesn't supported. Maybe it belongs to excel structure. But please help me if you have any ideas about this problem.

TrungWebsite.com
Thanks a lot.

Allow trigger from javascript

Support something like Downloadify.download(options).

Or, maybe something like $('#downloader').downloadify('trigger'); to trigger the download to happen. Just need some way to trigger the download without using the SWF click event.

Data uri with flash fallback

I'm writing this issue as an improvement suggestion.

It would be great to use data URI when possible. Something like what is in this gist: https://gist.github.com/2202660

When possible here means when the size of the file is in the boundaries of the data URI limitations and when data URI are supported in the browser. This way we could avoid the use of flash in some cases. This would bring benefits such as efficiency and network bandwith savings (I think that flash files can't be cached).

What do you think?

freeze in Safari on Windows7

Downloadify is working fine in all main browsers under Windows 7, but in Safari (5.1.7) I find that it saves the file, gives the onComplete dialog but then hangs at the 'Your file has been saved' box (i.e. does not accept a click on the 'ok' button)

Nothing happens when data is a Blob

Hi,

I'm generating a Blob with javascript and I want to download it to disk. This is possible, but you can't specify the file name. That's why I'm trying downloadify.

The thing is, nothing happens when downloadify is confronted with a Blob as data. I also tried base64 as data type. Maybe this is not the right way to use it, but probably desired behavior would be that the onerror funtion is called. Probably this will be the same with an ArrayBuffer.

I prefer not to convert my blob (again) to a string or base64 encode it because of memory consumption.

Offline usage?

I can't find a source file for downloadify.swf, is it possible to make one available, or post one compiled for offline use?

I want to compile for offline use, since I'm making a web app that will work online client-side, and also have an identical downloadable version for offline use.

Get Updated Content

Hi.
I wonder if it's possible to get an event to fire a function and get for example an updated div.

I'm using jQuery ui-sortable to update and save modified user after user interaction.
When I try to get the modified content from that list I just get the initial state not the updated content.

Below some code that is not updating on downloadify but it's updated if I print it to console.log()

$(document).ready(function(){
        if(typeof content_sorted === 'undefined'){
            content_sorted = 'initial_state'
        };
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable",
            update: function(event, ui) {
                content_sorted = $('#canvas_save').html();
                getSortableContent(content_sorted);
                                console.log(getSortableContent(content_sorted));
            }            
        }).disableSelection();

         $("#save_zone").downloadify( {
                filename: 'criterios.html',
                data: getSortableContent(content_sorted),
                transparent: false,
                swf: '../assets/Downloadify-master/media/downloadify.swf',
                downloadImage: '../assets/Downloadify-master/images/download.png?rev=3',
                width: 130,
                height: 50,
                transparent: true,
                append: false

             });

    });
    function getSortableContent(content_sorted){            
            template = '<hrml>\n<head></head>\n<body>'+
                        content_sorted 
                        +'</body></html>';
            return template;
        }

Thank you.

New line issue in textarea - Chrome and Firefox

Hi

I'm creating a keyword research tool and am using Downloadify as a export option allowing users to save the keyword list from a HTML textarea.

The keywords need to be on new lines within the textarea. However when exporting this with keywords on multiple lines using Downloadify to save it as a txt file... all keywords are merged onto one line. It works fine with IE... but Chrome & Firefox share the same problem.

Is there anything we can do to fix this?

Thanks, Matt

style.display = "none"

When I set style.display = "none" in a div containing a downloadify element, the downloadify element is not hidden.

Trigger "save to disk" button call with external javascript

Sorry, I know this is not an issue. But, I did not know how else to get in touch with you. I Just wanted to know if there is any way to trigger the "save to disk" button call with an external Javascript function?

Fallback for no-flash users

I have a fallback download solution on my site. But how does my script know that it should be used? Does Downloadify provide any info about the flash status (from my experience: no)?

Could downloadify create fallback html object and call onError on click?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of dcneiner/Downloadify!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library dcneiner/Downloadify is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "dcneiner/Downloadify",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Uploadify?

Firstly, this is just what I was looking for and works perfectly for my needs - thanks!

However, I also need to do the reverse (upload a file via flash to populate a javascript variable or html element) - I have to keep it all client side without interaction with the server.

I was wondering if this might be in the pipeline, or if you have any pointers to put this together myself.

Thanks