Write to file in JS using XMLHttpRequest?

Question

I figured out how to read a local .TXT file on the server into JS using the XMLHttpRequest API but for the life of me I cant get it to write to the file. Is it possible or is this only for reading the files in?

My code to read in works fine:

var fReader = new XMLHttpRequest();

fReader.onreadystatechange=function() {
  if(fReader.readyState==4 && fReader.status==200) {
    parseText(fReader.responseText);//Processes the file.
}}
fReader.open("GET",fFileLoc,true);
fReader.send();

I'm currently using PHP to write to the file, but it's far from ideal. I'd really like to us JS to do it. Any thoughts? Is there another approach to doing this? Is PHP the only way?

Thanks in advance,

-Dave

EDIT: @rjmunro +others: I found that using PHP was the better way to go about this... My revised code is as follows. (C&C welcome).

JS:

var fReader = XMLHttpRequest();
//var params = "MODE=GET&File=Data.txt";//To read
//var params = "MODE=POST&File=Data.txt&Message=" + myMessage;//To write

    fReader.onreadystatechange=function() {
        if(fReader.readyState==4 && fReader.status==200) {
            //Not really any response text if writing...
            parseText(JSON.parse(fReader.responseText).GET);
        }
    }

    fReader.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    fReader.setRequestHeader("Content-length", params.length);
    fReader.setRequestHeader("Connection", "close");

    fReader.send(params);

PHP

$MODE = $_POST['MODE'];
switch($MODE) {
    case('GET'):
      #Read in file and process, then return output.
      $return['GET'] = file($_POST['File']);
    break;

    case('POST'):
        if(file_exists($_POST['File'])){
            $file = fopen($_POST['File'],"a");

            $data = $_POST["Message"];

            fwrite($file,$data);
            fclose($file);
        }
    #$return['POST'] = "some message?";
    break;
}
echo json_encode($return);

The only thing i'm not 100% on with this solution is why i have to setRequestHeader? Chrome actually doesnt seem to like this... I pulled the code from another post.

Is JS running on your server also where the file you want to write in is stored (e.g. node.js) because from browser only it's not possible? — Bernie
– Bernie, Commented Oct 7, 2013 at 13:15
You can accept contents to be written using JS and then transfer it to PHP using XMLHttpRequest and finally use PHP to write to file. Yes, php us required to write to file. — user2672373
– user2672373, Commented Oct 7, 2013 at 13:15

Quentin · Accepted Answer · 2013-10-07 13:18:03Z

1

XMLHttpRequest allows you to make HTTP requests.

If you want to use it to write to a file, then the HTTP server must respond to the request by writing a file.

You could use the PUT verb to do this (note that you will have to configure the HTTP server to allow this, no HTTP server will allow arbitrary users to write files to the server's disk by default).

You could also pass the data using POST or another request type.

Is PHP the only way?

You can use any programming language you like on the server (subject to what the server supports, e.g. if you want to use C# then you almost certainly want a Windows server with IIS and ASP.NET). If you want to use JavaScript then there are many options, of which Node.js is significantly more popular then the others at present.

answered Oct 7, 2013 at 13:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rjmunro · Accepted Answer · 2013-10-07 13:17:03Z

0

You can probably configure apache to accept PUT requests, then send one using XMLHttpRequest (I'd use jQuery.ajax() to abstract this).

It's probably better to have PHP (or another server side language) handle it for you, though, as it will be difficult to control the authentication using only Apache.

answered Oct 7, 2013 at 13:17

rjmunro

28.3k21 gold badges113 silver badges135 bronze badges

Collectives™ on Stack Overflow

Write to file in JS using XMLHttpRequest?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related