Save binary data uploaded through AJAX on PHP server

Question

I've read a .png image file into an Array Buffer.

var readSingleFile = function(e) {
          var file = e.target.files[0];
          if (!file) {
            return;
          }
          var reader = new FileReader();
          reader.onload = function(e) {
            var contents =new Int8Array(e.target.result);

            $.ajax({
                   url: 'saveBinaryData.php',
                   type: 'POST',
                   contentType: 'application/octet-stream', 
                   data: contents,
                   processData: false
                }); 
          };
          reader.readAsArrayBuffer(file);
        }

This is posted to a PHP file as the AJAX describes.

How do I convert this binary data to an image format?

My code so far:

<?php
 if($data=file_get_contents($_POST)){
   echo "Error! Data not read!";
   return;
  }

  $data = imagecreatefromstring($data);

  var_dump($data);

  file_put_contents("recentImage1.png", $data);
  ?>

These are taken from various solutions found in Google. The image file is created but does not hold any content and therefore cannot be opened.

Did you try to write the uploaded data directly into file? I think it should not need any conversion on server side. It least that's how I upload images via AJAX (but maybe I use a different library). — Radek Pech, Apr 26 '16 at 10:16
Yeah, that was the first thing I did - no joy. I had a look at `imagecreatefromstring()` afterwards. — LeDoc, Apr 26 '16 at 10:20
`file_get_contents() expects parameter 1 to be a valid path, array given in /var/www/html/mqttHandscan/saveBinaryData.php` - taken from the Apache2 error log — LeDoc, Apr 26 '16 at 10:23
It's because you convert the file to array. Instead, you should convert it to string or URL: look for `readAsDataURL()` or `readAsBinaryString()` — Radek Pech, Apr 26 '16 at 10:31
`var_dump($data)` is returning `NULL`. Looks like it can't read the file contents uploaded. — LeDoc, Apr 26 '16 at 10:31
When you read binary POSTed data, use `file_get_contents('php://input')` instead of accessing `$_POST`. — Radek Pech, Apr 26 '16 at 10:35

score 3 · Answer 1 · edited May 23 '17 at 12:09

This is simple working demo that saves the uploaded file:

JS:

<script src='https://code.jquery.com/jquery-2.2.3.min.js'></script>
<script>upload = function() {
    f = new FileReader();
    f.onload = function(e) {
        $.ajax({
            url: '?upload',
            type: 'POST',
            contentType: 'application/octet-stream;charset=UTF-8',
            data: e.target.result.split(",", 2)[1], //remove text header
            processData: false
        });
    };

    f.readAsDataURL($('input')[0].files[0]);
}
</script>

HTML:

<input type="file" />
<button onclick="upload()">Upload</button>

And PHP:

<?php
if (isset($_GET['upload'])) {
    $file = file_get_contents('php://input');
    file_put_contents('recentImage1.png', base64_decode($file));
}

All the code is in single file, just split into 3 parts for better formatting.

Used posts:

Save binary data uploaded through AJAX on PHP server

1 Answers1

Linked