Pass multiple base64 data array through Ajax to PHP script?

Question

I am passing single base64 string as of now,but Now I need to pass multiple base64 string and sent through PHP script to the server.

as of now my code send only single data

$imagebase64 //it contains base64 array like -['data:image/jpeg;base64,/9j/4A','data:image/jpeg;base64,/9j/4A']

$("#downloadAll").click(function () {
    $.ajax({
        type: "POST",
        url: "imageUpload.php",
        data: {
                // Sending single as of now
                base64Img: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…1jSchh2MkeFK5Anv7fbTv5SKFqOFdOvm764mRVLQgtO8RoP/Z",
            },

        contentType: "application/octet-stream",
        error: function (err) {
            console.log("There was an error. Try again please!", err);
        },
        success: function (msg) {
            console.log(msg);
        },
    });
});

PHP Script

 $base64string = $_POST['data'];
 $uploadpath   = 'image-cropper';
 $parts        = explode(";base64,", $base64string);
 $imageparts   = explode("image/", @$parts[0]);
 $imagetype    = $imageparts[1];
 $imagebase64  = base64_decode($parts[1]);
 $file         = $uploadpath . uniqid() . '.jpeg';
 file_put_contents($file, $imagebase64);

After Updated Code as suggested-

Notice: Undefined index: data in /var/www/html/image-cropper/imageUpload.php on line 1 and empty array() posted to upload.php

Ajax call:

$("#downloadAll").click(function () {
    var imagebase64 = "<?= $imagebase64 ?>";
    $.ajax({
        type: "POST",
        url: "imageUpload.php",
         data: { imagesBase64: JSON.stringify(imagesBase64) },
  contentType: "application/json; charset=utf-8",
            error: function (err) {
            console.log("There was an error. Try again please!", err);
        },
        success: function (msg) {
            console.log(msg);
        },
    });
});

PHP:

$base64string = $_POST['data'];

$uploadpath   = 'image-cropper';
$parts        = explode(";base64,", $base64string);
$imageparts   = explode("image/", @$parts[0]);
$imagetype    = $imageparts[1];
$imagebase64  = base64_decode($parts[1]);
$file         = $uploadpath . uniqid() . '.jpeg';
file_put_contents($file, $imagebase64);

I already Pushed, any code sample or demo `$imagebase64` this contains data as array I have commented in code please see? — kate moss, Mar 08 '22 at 05:41
yes like `['data:image/jpeg;base64,/9j/4A','data:image/jpeg;base64,/9j/4A']` this — kate moss, Mar 08 '22 at 05:43
Why does any of this data need to be send via AJAX to PHP ... when you apparently _have_ it all in a PHP variable to begin with already? Apart from that, `var imagebase64 = "= $imagebase64 ?>";` does not make sense - you can not output an array with echo (which `=` effectively is) in PHP, that will always only ever get you the _word_ Array. An easy way to pass data from PHP to JavaScript (if actually necessary, I don't see that here yet), JSON is a good way, https://stackoverflow.com/a/24834434/1427878 — CBroe, Mar 08 '22 at 07:58
@CBroe have any snippet to explain please, where `imagebase64` array data pass and receive and process in PHP ? — kate moss, Mar 08 '22 at 08:02
@pk_ - In comments, yes. But if you have a solution, it should be written as an answer, not a comment :-) — M. Eriksson, Mar 08 '22 at 08:37
___Just as a general principal___ You show error messages that indicate errors on line 11 and 16!!! But you only show us 9 lines of code??? I appreciate its not always necessary to show all your code but if not, please indicate in the lines that you do show, which ones are the lines in the error messages — RiggsFolly, Mar 08 '22 at 09:37
@RiggsFolly oops all that hidden lines was just blank lines comment and space — kate moss, Mar 08 '22 at 09:39
Yes, that is as maybe, but still we dont know how many lines you have removed and from where! A simple `// <- line 11` etc would help on the code fragment — RiggsFolly, Mar 08 '22 at 09:45
___Debug step 1:___ Add a `print_r($_POST);` to the PHP to see what is really being passed into the $_POST Array, then we will know where to start looking for the error — RiggsFolly, Mar 08 '22 at 10:09
Then look at the javascript code, make sure that works as of now it appears you are not passing what you think you are — RiggsFolly, Mar 08 '22 at 10:17

score 0 · Answer 1 · answered Mar 09 '22 at 11:43

As I understand by your first code - your array has base64 data which is already in strings so no need to convert it again.

  $("#downloadAll").click(function () { 
    $.ajax({
      type: "POST",
       url: "imageUpload.php", 
      data: { data: imagesBase64 }, 
     cache: false,
     error: function (err, data) {
        console.log("There was an error. Try again please!" + data, err);
     },
     success: function (data) {
        console.log(data);
   },
 });
});

As I saw your PHP script has a lot of issues, it was made only to handle a single item, you need to iterate over the array too.

 $data = ($_POST['data']); 

 foreach($data as $base64_string ){
 
   $filename_path = md5(time().uniqid()).".jpeg"; //use png or jpg if required

   $base64_string = str_replace('data:image/jpeg;base64,', '', $base64_string);

   $base64_string = str_replace(' ', '+', $base64_string);
   $decoded = base64_decode($base64_string);

   //defining path 
   file_put_contents("image-cropper".$filename_path,$decoded);

 }

Pass multiple base64 data array through Ajax to PHP script?

1 Answers1