Uploading image (as data:image/png:base64) to webserver

Question

I have an image on a web page constructed like so:

<img src="data:image/png;base64;...." />

The contents of the image come from the user pasting into the browser. My question is how do I then upload the image to the webserver (PHP if that matters).

Answer 1

1) Take the src attribute with javascript (or the data submitted by user)

2) Submit it to the server 'as is' or cut and submit everything after base64; (AJAX or POST, method GET is probably not very suitable here for large images)

3) Decode base64 on server side (everything after base64; if not cutted), save the result as binary - it is an image.

That's it.

ps: just a reminder - by careful with possible code injection. Check the submitted data or somebody will upload encoded php script. Disable php engine in the folder with uploads and verify that the final result is an actual image (with the help of GD library, for example). Even if the script can not run on your server it could be used for malicious requests to other servers with php scripts.

Answer 2

Just post the base 64 encoded text to your server.

You could save it as...

file_put_contents($image, base64_decode($str));