How to save a file to the server by pressing a button in Javascript

Question

Ok so I'm experimenting with the in HTML5 and have made a simple "paint" application in Javascript to draw where the user's mouse is on the screen. Works fine.

I then wanted to save the coordinates to a file. My program already had an array of the x coordinates and an array of the y coordinates from the Javascript code.

When the user presses a button, the onClick calls a function in the Javascript, which using jQuery, as in the Top Answer here How to get JavaScript function data into a PHP variable attempts to pass this into a php file to save.

However it isn't working. Should I be passing the data back into the original php document that contains the canvas? If so how do I then get it to do the code to save as the PHP is run when the document is loaded no?

CODE:

Ok this is in the original php file which contains the HTMl for the webpage including the canvas. Here's the relevant save button:

<button type="button" onclick="saveDrawing()" id="saveButton">Save</button>

This calls the following in a separate JS file

function saveDrawing(){
// First check that not drawing and have data
if (!readyToDraw && clickX!=null){  
    // If ready then pass back to the PHP file the data
    $url = 'file_save_test.php';
    $.get($url, {x_coords: getXCoords(), y_coords: getYCoords()});
    }
else {
    alert("Please add some coordinate points and press Finish before saving");
}
}

and file_save_test.php contains only the following

<?php

// retrieve data from the JS
$buffer_data['x_coords'] = $_GET['x_coords'];
$buffer_data['y_coords']  = $_GET['y_coords'];

$x_s = $_GET['x_coords'];
$y_s = $_GET['y_coords'];

// first want to open a file
$file_name = "data_test.txt";
$file_handler = fopen($file_name, 'w');

// now to loop through arrays and write!
/*for ($i = 0; $i < sizeof($x_s); i++){
    fwrite($file_handler, "$x_s[i], ");
    fwrite($file_handler, "$y_s[i]\n");
} */


fclose($file_handler);


?>

Answer 1

In your PHP file it looks like your fwrite code is commented out. Are you expecting it to write to that data_test.txt file? Try changing your PHP file to print the results and have it echoed back to your javascript to see if the data is getting communicated properly.

$.get($url, {x_coords: getXCoords(), y_coords: getYCoords()},
    function(data){
        alert("Data Loaded: " + data);
    });

PHP

print_r($_GET);

EDIT

Change your PHP file to something like this if it's alerting the data properly (it should append the coords to your file):

<?php

// retrieve data from the JS
$x_s = $_GET['x_coords'];
$y_s = $_GET['y_coords'];

$file_name = "data_test.txt";
$file_handler = fopen($file_name, 'a');
fwrite($file_handler, "$x_s, $y_s \n");
fclose($file_handler);

?>

EDIT 2

Update your for loop to your original code

for ($i = 0; $i < count($x_s); $i++){
    fwrite($file_handler, $x_s[$i] . ", ". $y_s[$i] . "\n");
}

Answer 2

What I would do is have your save button call jQuery's $.post() method. Post the data to another PHP file that either inserts it into a database or saves it as a file. I don't recommend using the original document to post the data to because the client would have to download the entire DOM and the server would run any other code that you don't need.

That's as much as I can really help you without seeing any of your code.

Answer 3

I would send the data into a new php script called saveCoords.php or something..

You say you already have the coordinates in a JavaScript array, so it would look something like this...

//JAVASCRIPT FUNCTION which will request php file to store info
function storeCoords(xCoordArray, yCoordArray){
  var xCoords = JSON.stringify(xCoordArray);
  var yCoords = JSON.stringigy(yCoordArray);

  var request = new XMLttpRequest(); //will need to change for older ie 
  request.onreadystatechange = function(){
    //functions to handle returning information from php file..
  }

  request.open("GET","saveCoords.php?xCoords="+xCoords+"&yCoords="+yCoords, true);
  request.send();
}

And then saveCoords.php file would look something like this:

<?php
  $xCoords = json_decode($_GET['xCoords']);
  $yCoords = json_decode($_GET['yCoords']);

  //now you have a php array of xCoords and yCoords, which you can store
?>

Thats a skeleton but I think it hits on the major points, but comment with any questions.