calling js function in PHP Post Request

Question

I'm trying to call a javascript function after making a POST request using Jquery $.post() post request sends base64 image data and writes it down in the server the problem is that the post request is done and the file is uploaded but there is no javascript function called getCounterNumber(); is not working, the function supposed to do this

function getCounterNumber(Path){
  Tesseract.recognize(
  Path,
  'eng',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
   window.location.href = "getcounterreading.php?counterNumber="+text+"";
})
}

jQuery crop button click

            var base64data = reader.result;
            $.post('http://127.0.0.1/counter/uploadcounter.php', {image:base64data}, 
            function(response){ 
                  bs_modal.modal('hide');
                  alert("success upload image");
                      window.location.href = "uploadcounter.php";
                      console.log(response);

              });

uploadcounter.php

if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$folderPath = '../../uploads/counters/';

$image_parts = explode(";base64,", $_POST['image']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.png';
file_put_contents($file, $image_base64);
echo ("image uploaded successfully.");
console.log($file);
echo '<script>getCounterNumber("'.$file.'")</script>'; 
}

That is because the POST response is not automatically added to the html document. I'd suggest sending the file name only in the POST response and adding a .then() after the POST in the js which waits for the response, grabs the file name, and then calls getCountNumber. — Rocky Sims
– Rocky Sims, Commented Aug 24, 2022 at 23:21
window.location.href = "uploadcounter.php" First this line is the issue, you're being redirected after post request. second, you don't want to get the script in response, you need json in response and then use json data to run another JS function on post request callback. — Vijay Hardaha
– Vijay Hardaha, Commented Aug 24, 2022 at 23:23

King Beto · Accepted Answer · 2022-08-25 00:18:47Z

Don't return a tag. Return a JSON instead.

Your Javascript

(I'm using $.ajax() instead of $.post() for no particular reason. Maybe because it's more descriptive):

let base64data = reader.result;
let postData = { image:base64data };

$.ajax({
    type: "POST",
    url: 'http://127.0.0.1/counter/uploadcounter.php',
    data: postData,
    success: (result) => {
        bs_modal.modal('hide');
        getCounterNumber(result.data.file);
        alert("success upload image");
        console.log(response);
    },
    error: (error) => {
        alert("There was an error. Check JS Console.");
        console.log(error);
    },
    dataType: 'json'
});

Your PHP

if ('POST' === $_SERVER['REQUEST_METHOD']) {
    $folderPath = '../../uploads/counters/';
    
    $image_parts = explode(";base64,", $_POST['image']);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $file = $folderPath . uniqid() . '.png';
    file_put_contents($file, $image_base64);
    
    header("Content-Type: application/json");
    echo json_encode(["file" => $file]);
    exit();
}

Please note that I haven't run nor tested the code. It's just an example that you can follow as an inspiration.

Collectives™ on Stack Overflow

calling js function in PHP Post Request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related