Uploading an image from localStorage to PHP

Question

First of all, sorry for my poor english. Im having the following problem:

I do have the following code to store Dropped images on localStorage:

localStorage.setItem("dropped_images", JSON.stringify( array_dropped_images ) );

This will result in something like the following:

localStorage.getItem('dropped_images'):
[
{"id":0,"data":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACgAAAAWgCAIAAAAdYo2IAAAAGXRFW…nu8vxl30QxDphgBbok9vXa1iT2dWMDBGQHDCyNMfCUO83/A/VzaPVq31uqAAAAAElFTkSuQmCC"},
{"id":1,"data":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACgAAAAWgCAIAAAAdYo2IAAAAGXRFW…m4r4R9wH1l7K6H+6pa8cB9IzySnR2RydqmlhaTBqfp8hP/HzkuuKqP/f8rAAAAAElFTkSuQmCC"}
]

I just cant comprehend how can i send it to PHP and get it via $_FILES. Can you help me? Thanks!

------------------- SOLVED -----------------------------------------------------------------------------------------------------------

Based on the best answer ( @sam-battat ), could solve this, editing some part of the function:

function base64_to_img($base64_string, $output_file) {
    $data = explode(',', $base64_string);

    /**
     * Remove the raw text
     */
    $ext = str_replace("data:image/", '', $data[0]);
    $ext = str_replace(";base64", '', $ext);

    /**
     * Create the file with the correct extension
     */
    $ifp = fopen($output_file . "." . $ext, "wb"); 

    /**
     * Create file based on base64
     */
    fwrite($ifp, base64_decode($data[1])); 
    fclose($ifp); 

    /**
     * return file path
     */
    return $output_file; 
}

Thank you very much!

My answer on this question http://stackoverflow.com/questions/15056647/capturing-an-image-from-a-webcam/15056934#15056934 would work here too, you will just need to incorporate a bit of JSON parsing to handle the "data" element — Robot Woods, Jan 12 '15 at 22:28

score 1 · Accepted Answer · answered Jan 12 '15 at 22:28

1

You could post the string (base64 string) and convert it later to a file:

$img = $_POST['img_data'];

$file = base64_to_img($img, '/path/to/file.png');

function base64_to_img($base64_string, $output_file) {
    $ifp = fopen($output_file, "wb"); 

    $data = explode(',', $base64_string);

    fwrite($ifp, base64_decode($data[1])); 
    fclose($ifp); 

    return $output_file; 
}

answered Jan 12 '15 at 22:28

Sam Battat

5,725
1
20
29

huh, i think i got it. In my mind, based on your answer, i could do something like: data = { id: 0, data: [the string from data on my question] } $.post( 'request', data, function ... } then in PHP I would convert like you said. Am I right? – Edgar Valfogo Jan 12 '15 at 22:39

Uploading an image from localStorage to PHP

1 Answers1