I have a canvas image on my page with a Save button that saves down a `PNG` image file.

```
function save() {
   var canvas = document.getElementById('drawing');
   var dataURL = canvas.toDataURL();
   $.ajax({
   type: "POST", 
   url: "canvas_ajax_upload_post.php", 
      data: { img: dataURL }      
   }).done(function(msg){ 
      alert(msg); 
   });
}

```

The `canvas_ajax_upload_post.php` looks like this:

```
<?php
$img = $_POST['img'];
if (strpos($img, 'data:image/png;base64') === 0) {
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $data = base64_decode($img);
   $file = 'uploads/img'.date("YmdHis").'.png';
   if (file_put_contents($file, $data)) {
      echo "The canvas was saved as $file.";
   } else {
      echo 'The canvas could not be saved.';
   }   
}
?>

```

This works fine, images get saved to the uploads folder on my server. What I have been trying to do is store the filename in my SQL database. I have a hidden form field on my main page that I would like to pass the filename or filepath to after the image has been saved, but I cannot figure out how. 

I have tried embedding `JavaScript` code in the `PHP` file, but it just treats it as a text string and includes it in the alert popup. Essentially what I am trying to do is use the `$file` variable from the php file in `JavaScript` code. 

```
 E.g. document.getElementById("hidden_form_field").value = $file;

```

Can anybody help?