Develop Reference

VichUploader and CroppieJS : how to send a base64 cropped image to persist in Symfony 4

I have a small symfony 4 application with a cropper using CroppieJS.
When i crop and hit the save button, croppie sends me a base64 image :
$( "#cropSave" ).click(function() {
basic.croppie('result','canvas'
).then(function (result) {}
how to send this result to my controller and persist the image with VichUploader and Doctrine ?
Here is my controller :
public function updateProfilePicture(Request $request): Response
{
$this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
$user = $this->getUser();
$entityManager = $this->getDoctrine()->getManager();
$user->setImageFile($request->files->get('image'));
$entityManager->flush();
return new Response("ok");
}
I tried a lot of things but I must lack experience because it don't work :
var form = document.getElementById("myAwesomeForm");
var ImageURL = result;
// Split the base64 string in data and contentType
var block = ImageURL.split(";");
// Get the content type of the image
var contentType = block[0].split(":")[1];
// get the real base64 content of the file
var realData = block[1].split(",")[1];
// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);
// Create a FormData and append the file with "image" as parameter name
var formDataToUpload = new FormData(form);
formDataToUpload.append("image", blob);
or
function urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename, {type:mimeType});})
);
}
here is one of my ajax request :
$.ajax({
type : "POST",
data: formDataToUpload,
url : $('#updateProfilePictureLink').val(),
contentType:false,
processData:false,
cache:false,
dataType:"json",
success : function(response) {
$('#profilePicture').attr('src', result);
alert(response);
},
error : function (response) {
alert("error !");
}
});
I was thinking maybe "Simulate" a file upload in JS from the base64 using VichUploader formType input field, but I want to know if there are simpler ways.
Thanks

I managed to work around it thanks to Ronnie Hint.
You have to :
use JS FormData
put the blob inside
retrieve it in Symfony controller as an image
save it as is
But you have to implement serializable on your image's entity (serialize and unserialize all fields, unless it will break your other features).
Here is the working code sample :
// JS
$( "#cropSave" ).click(function() {
alert("click !");
basic.croppie('result','blob'
).then(function (result) {
var fd = new FormData();
//Third parameter is the blob name
fd.append('data',
result,$('#userId').val()+"."+result.type.split("/")[1]);
$.ajax({
type: 'POST',
url : $('#updateProfilePictureLink').val(),
data: fd,
processData: false,
contentType: false
}).done(function(data) {
// your things
});
// PHP
// Controller
try {
$this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
$user = $this->getUser();
$entityManager = $this->getDoctrine()->getManager();
$user->setImageFile($request->files->get('data'));
$entityManager->flush();
}
catch (exception $e) {
}
// Entity
class User implements UserInterface, \Serializable
{
/** #see \Serializable::serialize() */
public function serialize()
{
return serialize(array(
$this->id,
$this->profilePicture,
$this->email,
$this->password
));
}
/** #see \Serializable::unserialize() */
public function unserialize($serialized)
{
list (
$this->id,
$this->profilePicture,
$this->email,
$this->password
) = unserialize($serialized);
}

Show java servlet process in web

I'm developing a small web app that queries a few databases to do data predictions, then returns an object with the predicted result.
That's somewhat working already, but data processing in the servlet can go over half an hour depending on query filters, I usually set up a javascript "loading" div on submit, but its a bit sad.
So the question is, can I somehow send messages to the web client while the servlet is processing so it doesn't look like the page died? (improving the loading div with actual info on how the process is going)

Just add the preloader before sending the request and remove that preloader on success.
var isBool = false;
function communicateWithServer(){
$("#preloader").show();
var isBool = false;
$.ajax({
url : 'url',
data : {
},
type : 'POST',
dataType : 'text',
success : function(response) {
isBool=true;
$("#preloader").hide();
//Show success
},
error : function(request, textStatus, errorThrown) {
$("#preloader").hide();
//show error
}
});
secondComm();
}
function secondComm(){
$.ajax({
url : 'url2',//send the response from your second servlet to this
data : {
},
type : 'POST',
dataType : 'text',
success : function(response) {
$("#preloader").text(response.value);
if(!isBool){secondComm();}
//
},
error : function(request, textStatus, errorThrown) {
if(!isBool){secondComm();}
//show error
}
});
}
Please do not get confused with the jquery you can do this without jquery too.
function communicateWithServer() {
document.getElementById("preloader").style.display = 'block';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//show success
} else {
//show error
}
document.getElementById("preloader").style.display = 'none';
};
xhttp.open("GET", url, true);
xhttp.send();
}

Submit <img> through jQuery ajax?

My page has a file input. When the user uploads a photo, they then crop it and the result is stored in an img element (using FileReader).
How can I submit this image through jQuery ajax?
EDIT
I got something working. There are 2 problems though. First, the image file size is really big (almost 1MB for a 600x600 picture).
Second, I am not sure how to verify in PHP that the file uploaded is an image.
$pic = $_POST['pic'];
$pic = str_replace('data:image/png;base64,', '', $pic);
$pic = str_replace(' ', '+', $pic);
$pic = base64_decode($pic);
$path = "c:/wwwroot/images/img.jpg";
file_put_contents($path,$pic);

Using ajax you could read file bytes using FileReader Convert it to base64 and then send it to server. This is how It goes:
var sendingcanvas = document.getElementById('sendingcanvas');
var dataURL = sendingcanvas.toDataURL("image/*");
var imagedatatosend = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
var formdata = new FormData();
formdata = {
'image': imagedatatosend
};
$.ajax({
url: 'serverside',
type: 'POST',
data: formdata,
encode: false,
cache:false,
success: function(data){}
});
Easy and Recommended Way:
function upload(file, servlet){
var xhr=new XMLHttpRequest(), sres=null;
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
sres=xhr.responseText;
}
}
xhr.open('post',servlet,false);
xhr.send(file);
return sres;
}
Call the function Inputing image location and serverside link And you are good to go :)

you question need more description but as for normal image image upload code is here:
$(document).on('submit', 'form', function (event) {
event.preventDefault();
var form_data = new FormData();
$($(this).prop('elements')).each(function () {
if (this.type == 'file')
form_data.append(this.name, this.files[0]);//here you can upload multiple image by iterating through files[]
else
form_data.append(this.name, $(this).val());// for text fields
});
$.ajax({
type: "POST",
cache: false,
contentType: false,
processData: false,
url: $(this).attr('action'),
data: form_data,
beforeSend: function () {
},
success: function (data) {
},
error: function (data) {
});
}
});
});
if (this.type == 'file')
form_data.append(this.name, this.files[0]);
this will add data from input type file data to form_data and then it will be send by ajax

FormData parameters not pass to server with AJAX (pass fine with XMLHttpRequest)

I am trying to use ajax to pass a file (for upload it to server) and some other parameters to the server (perl cgi) but the server doesn't get the parameters.
The ajax:
$(function() {
$('#upload_file').click(function (){
var file = document.getElementById('file').files[0];
var formdata = new FormData();
formdata.append("Content-Type", "multipart/form-data");
formdata.append("sid", "1234");
formdata.append("file", file);
formdata.append("file_path_on_server", "/path/");
formdata.append("local_file_name", "sidebar_custom.css");
formdata.append("add_timestamp", "1"); // add timestamp to file name
$.ajax({
url : 'upload_file.cgi',
type : 'POST',
data : formdata,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});
// var xhr = new XMLHttpRequest();
// xhr.open("POST","upload_file.cgi",true);
// if (xhr.status != 200) {
// alert("Error '" + xhr.status + "' occurred when trying to upload your file.");
// }
// xhr.send(formdata);
});
});
When I am using XMLHttpRequest instead (which commented out) all parameters pass to the server script as requested.
e.g.
I tried to print the parameter "sid" but it is empty with ajax and "1234" with XMLHttpRequest.
I don't want to use XMLHttpRequest because I can't receive respond from the server (e.g. some file name string).
Am I doing something wrong?

Getting a partial response from a lQuery ajax request for progress bar?

I call a php page using an ajax request, then the php page calls a python script and the python script writes percentage of work done in a txt file and of course calculates what is needed.
From my code it is only possible to acess the txt file after the ajax request is done but this doesn't make sense as it is always 100%.
How would i read data if the txt with the progress is lets say: http://domain.com/progress.txt durring the request.
$.ajax({
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', "http://domain.com/pr.txt", true);
xhr.send();
var pro_perc = xhr.responseText;;
alert(pro_perc);
move1(pro_perc);
return xhr;
},
type: "POST",
url: "http://domain.com/req.php",
data: reqdata,
cache: false,
success: function(html) {
var values = html.split('[mydata]');
var mydata = values[1];
});

Actually you can find your answer here
JQuery ajax progress via xhr
or you can use this
var interval;
$.ajax({
beforeSend: function(){
interval = setInterval(function(){
$.get("http://domain.com/pr.txt").done(function(progress){
console.log(progress)
})
},10);
},
type: "POST",
url: "http://domain.com/req.php",
data: reqdata,
cache: false,
success: function(html) {
clearInterval(interval);
var values = html.split('[mydata]');
var mydata = values[1];
}
});