case
5May/109

Open and Save files to Desktop without going to Server

Few days ago I was working on a jQuery based tool to QA the JavaScript functionality of a website and I was in need of a method to save and load my scripts to Desktop.
In most cases this require a server script where you send the content and it will serve it to download and same for loading it. But a colleague suggested a better solution: to use the FileReference class.
First step was to create a simple flash with the required functionality and send/retrieve data with ExternalInterface. Failed miserably. Why ? Because it seems Flash will not allow you to open a File Dialog from script only. You literally have to click a button from the movie interface to be able to do that. If you knew that good for you, I didn't.

So, I've created another flash movie, where you pass the open and save image and callback and it will insert the flash with the specified images in place and look just like any other buttons.

Here's a small demonstration (other buttons beside open and save are just for show):

So what do you need to set it up ?

First, you have to include the FileDialogs.js in your document (or just paste the code inside it into your own script).

Second, you need your JavaScript callbacks.

1
2
3
4
5
6
7
function openCallback(input) {
     document.getElementById('text').value = input;
}
 
function saveCallback() {
     return document.getElementById('text').value;
}

openCallback() will be called once the user will select a file from the desktop and pass it's content as a parameter
saveCallback() will be called when the user clicks save, before the dialog to choose a file name opens, and it must return the content you want to save to disk

Third, you must setup the whole thing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// call this function on the onload event so the placeHolder element gets created
function onLoad() {
    // Create a config object
    var config = new FileDialogsConfig();
    // width of the entire flash movie (buttons width + padding)
    config.width = 45;
    // height of the movie
    config.height = 16;
    // padding between buttons
    config.padding = 5;
    // open dialog button image and javascript callback function
    config.open.image = "open.png";
    config.open.handler = "openCallback";
    // save dialog button image and javascript callback function
    config.save.image = "save.png";
    config.save.handler = "saveCallback";
    // create the movie inside an element with the given id and configuration
    new FileDialogs("placeHolder", config);
}

Note: Handler callbacks in the config must be declared as String and not reference. IE will freak out and I don't want to fix it.

You can have only one button (open or save) if you chose so. Just don't set the other one.

That's about it. The placeHolder can be any container element. The script will set it's style size based on the configuration, the movie will have transparent background so don't worry about that, and it will set it's float property to left so you can add other stuff after it. But all those things are easy to configure if you mess a bit with the FileDialogs.js file.

Cheers!

Download Source and Demo

Comments (9) Trackbacks (0)
  1. This could be just what I’m after, but the download link seems to be broken.

    Thanks for the insite

  2. I just wanted to say thanks again and throw a couple of suggestions out there for future development:

    1. It would be nice to be able to specify a default file extension when saving a file (also maybe an extension to filter by when selecting a file to load?)

    2. Would it be possible for the mouse cursor to change to a pointer (hand) on hover so it appears more like a regular link – This isn’t possible from css as far as I know as the flash movie is embedded.

  3. Thank you for this. I used this to to load a save data for my polydraw app. (http://www.scrollmania.com/polydraw.html) The problem I find is that I get a big space after the load save buttoms when I use Modzilla or Chrome. What am I doing wrong?

    • the flash is defined inside as a 500x500px movie because you can have 200×200 buttons if you want. You just have to specify the size from your html (width height params) and make it not scale (scale=”noscale”).

  4. Howdy I am so grateful I found your site, I
    really found you by mistake, while I was looking on Aol
    for something else, Anyways I aam here now and would just like to say cheers for
    a fantastic post and a all round entertaining blog (I also
    love the theme/design), I don’t have time to read through it all at thhe mment but I have bookmarked it and also
    added in your RSS feeds, so when I have time I will be back to
    read more, Please do keep up the superb job.


Leave a comment


*

CommentLuv badge

No trackbacks yet.