Saving files with Javascript?

March 19, 2006 8:31 AM

Are there any tutorials out there that explains how to save/update files from a browser using only javascript as tiddlywiki does?

(I tried to figure it out from the tiddlywiki source code without luck...)

posted by gwint to Computers & Internet (14 answers total)

Google loves you.
posted by charmston at 8:34 AM on March 19, 2006

charmston, are you sure tiddlywiki is using AJAX? I don't see any AJAX calls in a quick skim of the source.
posted by scottreynen at 8:58 AM on March 19, 2006

I've never looked into the tiddlywiki source, but AJAX will do as he asked: "save/update files from a browser using only javascript"
posted by charmston at 9:00 AM on March 19, 2006

Actually, to my knowledge, JS cannot manipulate client-side files/folders due to security constraints--I recall attempting to set up a script to cause the browser to access a local drive, and both Firefox and IE spat out security errors. I mean, think about what could happen if JS alone was capable of such things--you'd have websites that could erase your files!

Upon further examination, I appear to be correct--TiddlyWiki requires you to manually save it to your hard disk to get a local version, which you then may edit and save (and I'll note that the browsers still throw fits when this local version tries to save, although you may then opt to allow the action--which you cannot do for a remote script).

So if what you want is a JavaScript sitting on your Web server to manipulate files on the browser's machine, I think you're out of luck. I could be wrong, of course, but this is what I think I know :)
posted by cyrusdogstar at 9:32 AM on March 19, 2006

charmston: I think you might be confused, no offense intended if I'm wrong--AJAX is used to update server-side files via JS, not client-side files.

So I guess it all depends on what specifically you want, gwint--do you want JS that can save to your local machine, or to the Web server the JS is hosted on? If the former, see my first comment, and if the latter, then charmston is right and you want to be using AJAX (which is unfortunately not entirely JavaScript, but requires some server-side technology to pair with, although you can pick and choose various implementations in several languages).
posted by cyrusdogstar at 9:35 AM on March 19, 2006

Sorry for all the bolding and italics, I'm in a strongly emphasizing mood today, I guess =)
posted by cyrusdogstar at 9:35 AM on March 19, 2006

Response by poster: My understanding is that tiddlywiki allows both-- if the file is on a server, it updates the file on the server, if you have the file locally, it saves it locally, without ajax (i.e. without the use of XMLHttpRequest.) The "magic" of tiddlywiki is that all of the code to do this is within the file being changed-- and it's all javascript. (I think that's also how it gets around the security issues-- you can only manipulate the specific file you're triggering the code from?)

So anyway, it's clear that one can have a file updated/saved from a browser using only javascript because this is what tiddlywiki does. I'm just not sure how...
posted by gwint at 10:46 AM on March 19, 2006

Response by poster: Also, cyrusdogstar, I'm not sure what "I'll note that the browsers still throw fits when this local version tries to save" means for you, but when I use tiddlywiki both locally or online, I can save (i.e. update the file) from within the browser and it just works-- I click the "done" button and the file is updated without a peep from the browser.
posted by gwint at 10:50 AM on March 19, 2006

I get 2 or 3 security warnings when I use the "Save changes" function within a locally-installed TiddlyWiki (FF). However, there is a "Don't warn me about this again" checkbox - maybe you ticked this a while ago and forgot about it?

Also, are you sure about the saving on a server thing? I was under the impression that you needed a plugin for that.
posted by blag at 11:33 AM on March 19, 2006

To get TiddlyWiki working in Opera, you have to create a Java* security policy file that permits it to save locally. In IE, it uses some ActiveX method, and I'm not sure what it does in Firefox.

*not javascript, Java....
posted by evariste at 11:55 AM on March 19, 2006

Response by poster: I'm using Firefox, and blag, I believe you're right-- I think the first time I used it I got an alert.
posted by gwint at 12:01 PM on March 19, 2006

TiddlyWiki can in fact save to local files. It will only do this when it's saved already as a local file and loaded in the browser as a "file://" URL. AJAX is a complete red herring here, and has absolutely nothing to do with the question at all.

The main file reading/writing functions are saveFile() and loadFile(). These however are just glue around the browser-specific implementations of each of these functions: safariSaveFile(), safariLoadFile(), mozillaSaveFile(), mozillaLoadFile(), ieSaveFile(), ieLoadFile(), operaSaveFile(), operaLoadFile(). If you search for those functions you can see how each is implemented. Here is one:

// Returns null if it can't do it, false if there's an error, true if it saved OKfunction mozillaSaveFile(filePath, content){    if(window.Components)        try            {            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");            var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);            file.initWithPath(filePath);            if (!file.exists())                file.create(0, 0664);            var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);            out.init(file, 0x20 | 0x02, 00004,null);            out.write(content, content.length);            out.flush();            out.close();            return(true);            }        catch(e)            {            //alert("Exception while attempting to save\n\n" + e);            return(false);            }    return(null);}

posted by Rhomboid at 1:31 PM on March 19, 2006

cyrus: ajax is used to execute (not "write to") server-side scripts with given paramaters. If I'm not mistaken, most server-side languages can write to files
posted by charmston at 11:06 PM on March 19, 2006

It looks like TW does it this way.
posted by yerfatma at 4:51 AM on March 20, 2006