Loading and Saving Files

rnd me · 07-03-2008, 10:10 PM

Loading and Saving Files with browser javascript

Most of the ajax examples I've come across are complicated and use a two-step asynchronous process to fetch data.
new users get lost in the status checking and callback writing, and simply want to load a text file like a csv log file, an m3u playlist, or a css stylesheet into a variable.

browser javascript can use standard http methods like
GET, PUT, and DELETE to create, modify, and manage files on a remote server.

Setup:

for reading:
no setup is required to simply read a file into a string. while i have found way to sniff out ajax-type requests like used below, i haven't noticed anyone doing so.

for writing
The only configuration needed on the server, is the allowance of public or user-based write permissions. check configuration section of your hosting providers. most allow you to setup public read-private write on files. that's great because everyone can instantly see the changes only you can make.
browsers should automatically ask you to login if you try to write to a file that has private write. Assigning the permissions to the urls you will use in this code is a critical security consideration.

setup can be done with winxp pro's iis server by right-clicking a folder in the IIS web site folder-view. (run compmgmt.msc to view)

if you use apache, then you will need a bit of server-side code called a
put handler to catch the PUT requests. (module here)

however, many apache installations have these capabilities ready to go.

the IO function:

Code:

function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open(V ? 'PUT' : 'GET', U, false );
    X.setRequestHeader('Content-Type', 'text/html')
    X.send(V ? V : '');
return X.responseText;}

arguments[0] is the url (relative or absolute) of the file you want to access.
arguments[1] is an optional string .
if arguments[1] is set to anything, IO places that string into the url passed in arguments[0]

A tested cut-and-paste example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript-only file writing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>javascript fileIO demo</h1>	
open <a href='newPage.htm' target="_blank">my new page</a> in a new tab/window.
<br />
<br />

<textarea rows='10' cols='80' id='userValue'>Hello World</textarea>	
<br />

<input type='button' value='Save' onclick="doSave()"  />	

&nbsp;&nbsp;&nbsp;
<input type='button'  value='Load' onclick="doLoad()"  />	

<script type='text/javascript'>


function el(tid) {return document.getElementById(tid);}

function IO(U, V) {//LA MOD String Version. A tiny ajax library.  by, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open(V ? 'PUT' : 'GET', U, false );
    X.setRequestHeader('Content-Type', 'text/html')
    X.send(V ? V : '');
return X.responseText;}	


function doSave(){
	IO("newPage.htm" , el("userValue").value ); 
}

function doLoad(){
	el("userValue").value = IO("newPage.htm"); 
}

</script>


</body>
</html>

So will this work for me?

working servers support GET, so consider IO's read capability reliable.

you can check what methods your server supports by saving the code below as "servertest.htm" (or whatever) and opening it your browser.
it will list the HTTP verbs your server will support. for saving files, you need PUT.

Code:

<html><head><script>

    function sOptions(tUrl) { //server options
        var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
        XHRt.open("OPTIONS", tUrl , false);
        XHRt.send("");
        return XHRt.getResponseHeader("Allow").split(/\W+/g);
    }

  document.write (sOptions(window.location.href));
  document.close()
</script></head</html>

One more bonus (no example)
if you are allowed to do so, you can delete files as well:

Code:

function DELETE(U) {//LA MOD  A tiny ajax library.  (c)2007, DanDavis
    var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    X.open("DELETE");
    X.send('');
return X.status;}

07-03-2008, 10:10 PM	PM User \| #1
rnd me Senior Coder Join Date: Jun 2007 Location: Urbana Posts: 1,802 Thanks: 4 Thanked 250 Times in 238 Posts	Loading and Saving Files Loading and Saving Files with browser javascript Most of the ajax examples I've come across are complicated and use a two-step asynchronous process to fetch data. new users get lost in the status checking and callback writing, and simply want to load a text file like a csv log file, an m3u playlist, or a css stylesheet into a variable. browser javascript can use standard http methods like GET, PUT, and DELETE to create, modify, and manage files on a remote server. Setup: for reading: no setup is required to simply read a file into a string. while i have found way to sniff out ajax-type requests like used below, i haven't noticed anyone doing so. for writing The only configuration needed on the server, is the allowance of public or user-based write permissions. check configuration section of your hosting providers. most allow you to setup public read-private write on files. that's great because everyone can instantly see the changes only you can make. browsers should automatically ask you to login if you try to write to a file that has private write. Assigning the permissions to the urls you will use in this code is a critical security consideration. setup can be done with winxp pro's iis server by right-clicking a folder in the IIS web site folder-view. (run compmgmt.msc to view) if you use apache, then you will need a bit of server-side code called a put handler to catch the PUT requests. (module here) however, many apache installations have these capabilities ready to go. the IO function: Code: function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); X.open(V ? 'PUT' : 'GET', U, false ); X.setRequestHeader('Content-Type', 'text/html') X.send(V ? V : ''); return X.responseText;} arguments[0] is the url (relative or absolute) of the file you want to access. arguments[1] is an optional string . if arguments[1] is set to anything, IO places that string into the url passed in arguments[0] A tested cut-and-paste example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript-only file writing</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>javascript fileIO demo</h1> open <a href='newPage.htm' target="_blank">my new page</a> in a new tab/window. <br /> <br /> <textarea rows='10' cols='80' id='userValue'>Hello World</textarea> <br /> <input type='button' value='Save' onclick="doSave()" />     <input type='button' value='Load' onclick="doLoad()" /> <script type='text/javascript'> function el(tid) {return document.getElementById(tid);} function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); X.open(V ? 'PUT' : 'GET', U, false ); X.setRequestHeader('Content-Type', 'text/html') X.send(V ? V : ''); return X.responseText;} function doSave(){ IO("newPage.htm" , el("userValue").value ); } function doLoad(){ el("userValue").value = IO("newPage.htm"); } </script> </body> </html> So will this work for me? working servers support GET, so consider IO's read capability reliable. you can check what methods your server supports by saving the code below as "servertest.htm" (or whatever) and opening it your browser. it will list the HTTP verbs your server will support. for saving files, you need PUT. Code: <html><head><script> function sOptions(tUrl) { //server options var XHRt = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); XHRt.open("OPTIONS", tUrl , false); XHRt.send(""); return XHRt.getResponseHeader("Allow").split(/\W+/g); } document.write (sOptions(window.location.href)); document.close() </script></head</html> One more bonus (no example) if you are allowed to do so, you can delete files as well: Code: function DELETE(U) {//LA MOD A tiny ajax library. (c)2007, DanDavis var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); X.open("DELETE"); X.send(''); return X.status;} __________________ libs mini F ASPmini dnd OO(gen api) tmpl8 apps snippets blog Slides(demo maker) crypto image editor crapplets compressor prepage JSON(browser viewer) time notepad bench Last edited by rnd me; 07-03-2008 at 10:17 PM..

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: