Question

I have this array at the moment which contains a lot of data URIs. I set this earlier in the code like this:

dataArray = [];
dataArray.push({name : file.name, value : this.result});

After doing a few things with the data URIs I want to upload them when the user finally presses the upload button, so I pass the data URIs to a PHP file like so:

$.each(dataArray, function(index, file) {   

    $.post('upload.php', dataArray[index], function(data) {

And run a few functions inside to show a loading bar, etc.

Now in the PHP file (upload.php) I have no idea what to do. Each data URI will be posted separately to the PHP file, but how do I treat a data URI in PHP? Usually I would do $_POST to get the data URI itself but I don’t really know how to go about pushing this into a folder on the server. Can I treat the data URI as just a normal file and use $_FILES? So far I haven’t had much success.

Answer 1

Your POST data will be like this:

$name = $_POST['name'];
$value = $_POST['value'];

Before you even touch the values of those variables, need to sanitize all of the variables first and confirm that the $value variable is in fact a valid image file. To do this, you need to convert the data-URI to an actual image.

To do that, you need to examine the structure of the data-URI:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

So in order to parse it, you need to write a regex to extract this information from the data-URI, decode the base64-encoded image data, and finally try to parse it as an image file using the MIME-type. If this fails, the image is corrupted. If not, you can save it to your server.

It may sound complicated, but I doubt it will take you very long to implement.