Append javascript auto-generated file to POST form and process it on PHP in $_FILES

Question

I'm trying to append file to a form and send it via POST request.

The problem is the file generates in js script (it's cropped image in base64) Next, I convert it from base64 to blob. And there no idea how to link this blob to my form.

I can do it via ajax , but looking for way to send image as file without xhr/ajax and proccess it of PHP side in $_FILES .

Don't even know is it possible

My form has attr 'multipart/form-data'

Answer 1

you can create a hidden canvas and in that canvas you can draw the image with your base64 encoded string. Something like below

<canvas style="height:200px;width:200px;display:none;" id="picture"></canvas>
<input type="hidden" name="clicked_image" id="clicked_image" />

and then the javascript code as

<script type="text/javascript">
var videoPicture = 'your base64 string';
var hiddenPictureField = document.querySelector('input#clicked_image');
var canvasPicture = window.canvas = document.querySelector('canvas#picture');
canvasPicture.width = 480;
canvasPicture.height = 360;
canvasPicture.getContext('2d').
drawImage(videoPicture, 0, 0, canvasPicture.width, canvasPicture.height);
hiddenPictureField.value = canvasPicture.toDataURL("image/png");
</script>

And then you will get the image in the clicked_image field. The base 64 string you can process it accordingly.