ajax.open("POST", "upload.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//ajax.setRequestHeader("Content-Type", "image/png",1);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
alert(ajax.responseText);
}
}
ajax.send("imgData=" + canvasData);
}
This is the xmlhttprequest that sends the data to upload.php which says that it is unable to save the file. However the php page saves the file with 0B.
<?php
// Requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['canvasData'];
print $img;
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
Above being the php file to which the data gets posted......
If you want to upload file into directory use move_uploaded_file function , but your question unclear , check the following post link
Related
I am trying to upload a canvas image to my server using AJAX, the AJAX is working fine, however when I give the server the URL it converts it and adds backslash in at every folder in the URL, and I cant see how. I need it to stop adding these backslashes into the string.
if(isset($_POST['saveCanvas']) && $_POST['saveCanvas'] == "1"){
$img = $_POST['canvasURL'];
$img = str_replace('data:image/png;base64','',$img);
$img = str_replace(' ', '+',$img);
$data = base64_decode($img);
$file = "https://example.com/wp-content/plugins/my-plugin/images" . uniqid() . '.png';
$success = file_put_contents($file, $data);
$return = [];
$return['success'] = 1;
$return['message'] = 'Image Uploaded! ' . $file;
echo json_encode($return);
}
This is what I want the output to look like https://example.com/wp-content/plugins/my-plugin/images and this is the current output https:\/\/example.com\/wp-content\/plugins\/my-plugin\/images5f7d97548917d.png
If I am not mistaken, this happens because you are JSON encoding your return array. Did you try to just returning $file upon success?
Based on your current issue I would suggest you do this on your php.
if(isset($_POST['saveCanvas']) && $_POST['saveCanvas'] == "1"){
$img = $_POST['canvasURL'];
$img = str_replace('data:image/png;base64','',$img);
$img = str_replace(' ', '+',$img);
$data = base64_decode($img);
$file = "https://example.com/wp-content/plugins/my-plugin/images" . uniqid() . '.png';
echo file_put_contents($file, $data) ? $file : 0;
}
This will check if the file has been uploaded and return a file name or the integer 0.
When the response reaches your ajax, the ajax will check the response.
if its 0, it will be counted as false so you can do.
if(response){
//success code
}else{
//fail code
}
For example
alert(response ? 'Image Uploaded! '+ response : 'Failed to upload');
I have a PHP script that allows me to send a pdf file to it and it saves the PDF file locally.
<?php
define('UPLOAD_DIR', 'upload/');
$img = $_POST['image'];
$img = str_replace('data:image/pdf;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . 'image.pdf';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
How do I run a function once the file has been saved?
I have this js :
$.ajax({
url: 'ajaxfile.php',
type: 'POST',
data: {
image: base64URL
},
success: function(data){
console.log(data);
$.notify("info", "Upload successfully");
},
error: function () {
$.notify("Error on image upload");
}
});
PHP code :
<?php
$image = $_POST['image'];
$location = "src/upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
file_put_contents($file, $image_base64);
return [
'status' => true
]
?>
The call is done (I saw in browser console) but on console.log I have the code php returned. Seems that nothing happen, the code php is not implemented. Have you an idea ? Thx in advance and sorry for my english
I put an image with the error
file_put_contents() returns false on failure, so you could assign it to a variable and use that to determine your status like so:
<?php
$image = $_POST['image'];
$location = "src/upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
$imageData = file_put_contents($file, $image_base64);
if ($imageData !== false) {
echo "success";
} else {
http_response_code(500);
die();
}
?>
i have a function which can write image on server folder with PHP. i follow instruction on this link Can't save a HTML5 Canvas as Image on a server , my problem is, i want to show success message when image save. on my code, it just show message only when write image failed. here is my function :
$loc = $_POST['lokasi'];
define('UPLOAD_DIR', $loc);
$filename = $_POST['nama-file'];
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR ;
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
thanks for your response. :)
$loc = $_POST['lokasi'];
define('UPLOAD_DIR', $loc);
$filename = $_POST['nama-file'];
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR ;
if (file_put_contents($file, $data)) {
echo "Image saved";
} else {
echo "Unable to save the file.";
}
Note: With file-uploads its better to use move_uploaded_file
I have some problem in my ionic app, I want to update the image before sending it to server, so I have captured image and encoded in base64 jpeg format. I want that format to be decoded into something like "name.jpg" and it should exactly have same name what php file decode and here is my encoded code in AngularJS and decoded code in php
Angular code:
$scope.takePicture = function(source)
{
var options = {
quality : 85,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : source,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 180,
targetHeight: 180,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.imgURI= "data:image/jpeg;base64," + imageData;
}, function(err) {
// An error occured. Show a message to the user
});
}
php code:
if (array_key_exists('picture', $data))
{
define('UPLOAD_DIR','../images/user_img/'); // Change your path location here and change permission to 777 ***
$img = $picture;
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$dataimg = base64_decode($img);
$filename = uniqid().'.jpeg';
$file = UPLOAD_DIR.$filename;
$success = file_put_contents($file, $dataimg);
$picture = $filename;
//log_message('info', $success ? $file : 'Unable to save the file.');
}