How to save image to server folder in PHP

Question

I have this HTML code:

<div id="container">
   <div id="calendar">
   </div>
 </div>
<button class="btn btn-dark mb-1" onclick="captureAndSave()">Format</button>

There is also this js code

<script>

  function captureAndSave() 
  {
    // Select "calendar" element
    var elementToCapture = document.querySelector('section.content');

    // Hide ".noPrint" elements
    var elementsToHide = elementToCapture.querySelectorAll('.noPrint');
    elementsToHide.forEach(function(element)
    {
      element.style.visibility = 'hidden';
    });

    html2canvas(elementToCapture).then(function(canvas) 
    {
      var imageBase64 = canvas.toDataURL('image/png');

      elementsToHide.forEach(function(element) 
      {
        element.style.visibility = 'visible';
      });

      var link = document.createElement('a');
      link.href = imageBase64;
      link.download = 'captura.png';

      link.click();
    });
  }

</script>

Pressing the button should download the image with content "section.content", right? This actually works successfully, but when I try to modify this code so that it downloads the image to a server folder instead of downloading to the user's computer, I can't.

I tried this method:

<script>

function captureAndSave() 
{
  var elementToCapture = document.querySelector('section.content');

  var elementsToHide = elementToCapture.querySelectorAll('.noPrint');
  elementsToHide.forEach(function (element) {
    element.style.visibility = 'hidden';
  });

  html2canvas(elementToCapture).then(function (canvas) {
    var imageBase64 = canvas.toDataURL('image/png');

    elementsToHide.forEach(function (element) {
      element.style.visibility = 'visible';
    });

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'assets/imagen.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    var data = 'image=' + encodeURIComponent(imageBase64);
    xhr.send(data);

    xhr.onload = function () {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        if (response.success) {
          alert(response.message);
        } else {
          alert('Error: ' + response.message);
        }
      }
    };
  });
}

</script>

I tried to manage the PHP code named "image.php" saved to the server without success:

<?php
$response = array();

if(isset($_POST['image'])) 
{
  $imageData = $_POST['image'];

  $filePath = '../vistas/img/temp/imagen.png';

  if(file_put_contents($filePath, base64_decode(preg_replace('#^data:image/w+;base64,#i', '', $imageData)))) 
  {
    $response['success'] = true;
    $response['message'] = 'The image has been saved successfully.';
  } 
  else 
  {
    $response['success'] = false;
    $response['message'] = 'There was an error saving the image.';
  }
} 
else 
{
  $response['success'] = false;
  $response['message'] = 'No image received.';
}

  header('Content-type: application/json');
  echo json_encode($response);
?>

Any suggestions on changes I could make or a better way to achieve what I want? First of all, thank you.

Answer 1

One thing that caught my attention is the path you defined for the $filePath variable. If the complete directory tree where you want to upload the file does not exist, the write operation will fail.

You can use the following code to ensure that the directory tree to the file you want to write exists before trying to write to it.

$directory = dirname($filePath);
if (!is_dir($directory)) {
    mkdir($directory, 0777, true);
}

You can also use exception handling to determine the type of error for debugging purposes. By default, file_put_contents will only return a warning, so having PHP throw exceptions may be beyond the scope of your project.

Checking your PHP logs can also help you figure out the cause of the problem.