I'm using croppie.js to crop user uploaded imaged, once the crop is done ajax is used to upload the result. Here is the codes for that...
Page A..
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "uploadown/uploader.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img id="cropresult" style="margin: 0px;" src="' + resp + '" />;
$("#uploaded-input").html(html);
}
});
});
});
Then uploader.php is..
<?php
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents($imageName, $data);
?>
As you can see uploader.php is using time() for the $imageName variable.
I either need to pass $imageName back to Page A during upload or set $imageName in page A first and pass it to uploader.php at the same time as the image info.
After a few hours and many attempts having read many similar questions on here and cannot work out how to do this. Any help greatly appreciated.
just echo the name in php or var_dump() the array and then you will be able to access it in your javascript
all the data from the php page is addign to the variable name you give to the anonymous function you give to the success callback. for your case it will be accessed as data
Echo out the $imageName in php file, once done use it in javascript.
PHP
<?php
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
if(file_put_contents($imageName, $data)){
echo $imageName;
} else {
echo " ";//In this case src will be empty
}
?>
Java script
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "uploadown/uploader.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img id="cropresult" style="margin: 0px;" src="' + data + '" />';
$("#uploaded-input").html(html);
}
});
});
});
For any queries comment down.
Found your full exmaple here: https://websolutionstuff.com/post/crop-image-before-upload-using-croppie-plugin
Consider the following PHP.
<?php
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
if(file_put_contents($imageName, $data)){
echo "Success, " . $imageName;
} else {
echo "Error, unable to Put file.";
}
?>
This will provide a response to the AJAX Script.
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "uploadown/uploader.php",
type: "POST",
data: { "image":resp },
success: function (data) {
var response = data.split(",");
var html;
if(response[0] != "Error"){
html = '<img id="cropresult" style="margin: 0px;" src="' + response[1].trim() + '" />';
$("#uploaded-input").html(html);
} else {
console.log(data);
}
}
});
});
});