0

As stated I am recieving no data through my $_POST. I am trying to pass multiple canvas dataURLs to the server to be stored as images. The data exists on the client but never makes it to the server. It saves a bunch of empty .PNGs which shows me that the code is being executed, just none of the data there.

Here is relevant info from my JavaScript file:

function saveImages(){
   $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "urlForPHP.php",
      data: $('#form1').serialize(),
      success: function (result) {
        console.log("Success");
      }
    });
}

And here is my PHP file (for one image only, I have removed the loop to store multiple images for readability)

<?php

  ini_set('display_errors', 'On');
  error_reporting(E_ALL | E_STRICT);

  $rest_json = file_get_contents("php://input");
  $_POST = json_decode($rest_json, true);

  $finalDest = "path/to/save/";
  if (!is_dir($finalDest)) {
    // dir doesn't exist, make it
    mkdir($finalDest, 0777, true);
  }

  //save data
  $file = base64_decode($_POST["image"]);
  $success = file_put_contents($finalDest . $x . ".png", $file);
  print $success ? $file : 'Unable to save the file.';

Thank you in advance, sorry if this has been solved before but I have done quite a bit of reading up on this and tried the solutions to similar answers and nothing has worked so far.

EDIT

Added HTML code, forgot to include my Form!

<form method="post" accept-charset="utf-8" name="form1">
   <input name="boxTypeID" id="boxTypeID" type="hidden"/>
   <input name="image" id="image" type="hidden"/>
   <input type="button" name="send" onclick="saveImages()"/>
</form>
P Carroll
  • 1
  • 1
  • "The data exists on the client "...you'll have to show us your form so we can understand what you're doing. You're serialising the form, but are these URLs stored in a form field, or not? You mention they're Canvas dataURLs so presumably you generate them at some time in your code...but if you don't place them into a submittable form field then they won't be serialised. Have you used your browser's network tool to examine the ajax request and see what actual data is being sent in the request? – ADyson Jun 20 '18 at 11:38
  • 3
    Don’t try to set `$_POST`. You can’t and shouldn’t try to redefine or override a superglobal like that. – elixenide Jun 20 '18 at 11:38
  • @ADyson thank you for your quick reply I have edited it to include my form – P Carroll Jun 20 '18 at 11:44
  • @EdCottrell thank you for your quick reply. I got that from [this question here](https://stackoverflow.com/questions/1282909/php-post-array-empty-upon-form-submission) should I remove it? – P Carroll Jun 20 '18 at 11:45
  • try just `$_POST` instead of `php://input`. Do a var dump and you should see you keys/values – delboy1978uk Jun 20 '18 at 11:49
  • @delboy1978uk I don't think so, since OP is sending the data as JSON it will arrive all in one big lump – ADyson Jun 20 '18 at 11:51
  • He is using method POST though. He should at least try and `var_dump` it – delboy1978uk Jun 20 '18 at 11:52
  • @PCarroll ok thanks. And how are you generating your data URLs? Which field do you place them in? Have you carried out the debugging as I suggested to see what actually gets sent? If what gets sent is ok, then next you need to do a dump of `$rest_json` on the server side to see whether it's reading the data or not – ADyson Jun 20 '18 at 11:52
  • The dataURLS are different saved states of a canvas on screen. They are all there on the client. I can load and reload them while on the page. I have done a var_dump before and it is completely empty. I seems none of the data is there at all! – P Carroll Jun 20 '18 at 11:57
  • What are you expecting from `$file = base64_decode($_POST["image"]);`? The `image` element in your HTML form is a hidden element with no value. – Mr Glass Jun 20 '18 at 12:07
  • @MrGlass Data is placed into the `image` element in another function before this is called. (`document.getElementById('image').value = canvas.toDataURL();`) – P Carroll Jun 20 '18 at 12:12
  • "Data is placed into the image"...how and when? It certainly isn't happening when "saveImages" runs. So please show us how you're doing that. – ADyson Jun 20 '18 at 12:13
  • " I have done a var_dump before and it is completely empty."...ok but you've again missed out the previous step - checking what is _sent_ in the AJAX request. Do you understand how to use your browser tools to do that? – ADyson Jun 20 '18 at 12:13
  • @ADyson sorry pressed return before typing my full message earlier. My bad! I have updated it now. The data is stored into the form a different function every time the canvas is updated. – P Carroll Jun 20 '18 at 12:17
  • @ADyson No I do not, I am very new to this! – P Carroll Jun 20 '18 at 12:17
  • @PCarroll Yes; that’s not a good way to handle this. Either use your own variable (`$rest_json`) or, if the data is actually already in `$_POST`, just use that. – elixenide Jun 20 '18 at 12:19
  • @PCarroll see https://stackoverflow.com/a/3019085/5947043 . This is for Chrome but most desktop browsers are similar and have similar tools, you can usually press F12 to open them. You can also step through your JS code and set breakpoints on it to see what data is in the variables at any moment. Google themselves provides extensive documentation on the Chrome developer tools, and I would think the other browser vendors do the same for their tools. Once you find your way around, they're not too hard to use. Console, Network and Sources are the most useful sections – ADyson Jun 20 '18 at 12:23
  • This way you can start to understand whether it's the client-side code which is failing to send the correct data, or the server-side code which is failing to read it properly. – ADyson Jun 20 '18 at 12:25
  • @ADyson thank you very much! Hopefully this will solve my issue! Thank you for your time today! – P Carroll Jun 20 '18 at 12:30

0 Answers0