Canvas Image

[albertrubis]

I'm having problem in saving the canvas image data with the specific title in hte input text. It saved in the server but you need to rename ("name.png") it in the php file.

<input type="text" id="titlecanvas" name="title" size="30" />
<input type="button" id = "RoSave" value="Save my drawing!" onclick="RoSave(this.frm);">

and my javascript is this:

function RoSave(frm)
 { 
var data = document.getElementById("RoCanvas").toDataURL('image/png');
var ajax = new XMLHttpRequest();
ajax.open("POST",'file_path/canvass.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(data); 

}

and the php file is:

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

    $filteredData=substr($imageData, strpos($imageData, ",")+1);
 
    $unencodedData=base64_decode($filteredData);

    $fp = fopen('name.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
} 

I need to get the input name so that it will be the name of the Image that will be saved to the server.

Please Help!

[toicontien]

Pass the file name from the text field as a query string parameter:

ajax.open("POST",'file_path/canvass.php?filename=' + escape(valueOfTextField),false);

Then you should be able to access it via $_GET['filename'] in PHP. Be sure to properly sanitize the file name so users cannot save data on your server outside of the directory where you want things saved. You also might want to check content-type request header in PHP to make sure users can't upload an executable file. Just because JavaScript is limiting the upload to an image doesn't mean somebody can't create a PHP, Ruby or Perl script that POSTs a virus to your server.

[albertrubis]

Thank you toicontien!, It works! thank you for the information you gave me.

[ann80719]

Dear toicontien:

Could you please explain "escape(valueOfTextField)" more detailed?Thanks~