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
– Radek Pech, Commented Apr 26, 2016 at 10:16
Yeah, that was the first thing I did - no joy. I had a look at imagecreatefromstring() afterwards. — LeDoc
– LeDoc, Commented Apr 26, 2016 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
– LeDoc, Commented Apr 26, 2016 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
– Radek Pech, Commented Apr 26, 2016 at 10:31
var_dump($data) is returning NULL. Looks like it can't read the file contents uploaded. — LeDoc
– LeDoc, Commented Apr 26, 2016 at 10:31

Community · Accepted Answer · 2017-05-23 12:09:52Z

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:

Collectives™ on Stack Overflow

Save binary data uploaded through AJAX on PHP server

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related