Save base64-encoded image with AJAX request in PHP

base64, jquery, php

Solution

Lets try to create file test.php in same folder with single function and call, check output errors in browser or `/var/log/httpd/error_log`

<?php

function saveImage($base64img){
    define('UPLOAD_DIR', '../uploads/');
    $base64img = str_replace('data:image/jpeg;base64,', '', $base64img);
    $data = base64_decode($base64img);
    $file = UPLOAD_DIR . '123123123.jpg';
    file_put_contents($file, $data);
}

saveImage('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5a/Z7/Zw8EfF/9mT4h6Z4u0GTwt8WNP1iSya7vZp0uNKYJBsItyANjt5o2uGkDBsHhMfDsOn2zWcTQ39tJCUBR5HVGYY4JUEgH2BIHrXunw71vWdI/aa+POraTq+p6Xqr+H/Edy15aXTxTNMt4m2QupDbxubDZyMn1r4yRE8pflXoO1fleQYDEzzHGxnXbjeEop6qPNFtpXb00Wm3zP1vNM2pUMLh5RpK75k3fV8rVm7LzP/Z');

That mean that troubles in part AJAX => php script. Now, we try to compare what we recieve from ajax and original string, just change your function to this and look at test.txt:

function saveImage($base64img){
    define('UPLOAD_DIR', '../uploads/');

    $file = UPLOAD_DIR . 'test.txt';
    file_put_contents($file, 'ORIG:'.'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5a/Z7/Zw8EfF/9mT4h6Z4u0GTwt8WNP1iSya7vZp0uNKYJBsItyANjt5o2uGkDBsHhMfDsOn2zWcTQ39tJCUBR5HVGYY4JUEgH2BIHrXunw71vWdI/aa+POraTq+p6Xqr+H/Edy15aXTxTNMt4m2QupDbxubDZyMn1r4yRE8pflXoO1fleQYDEzzHGxnXbjeEop6qPNFtpXb00Wm3zP1vNM2pUMLh5RpK75k3fV8rVm7LzP/Z'."\n".'AJAX:'.$base64img);
}

Problem

I encoded a canvas-image to base64 which gives me this: ``` data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5a/Z7/Zw8EfF/9mT4h6Z4u0GTwt8WNP1iSya7vZp0uNKYJBsItyANjt5o2uGkDBsHhMfDsOn2zWcTQ39tJCUBR5HVGYY4JUEgH2BIHrXunw71vWdI/aa+POraTq+p6Xqr+H/Edy15aXTxTNMt4m2QupDbxubDZyMn1r4yRE8pflXoO1fleQYDEzzHGxnXbjeEop6qPNFtpXb00Wm3zP1vNM2pUMLh5RpK75k3fV8rVm7LzP/Z ``` which seems like a valid base64-image (decoded it with an online-decoder). I send this with other (form-) variables with jquery ajax like this: ``` $.ajax({ type: "POST", url: "index.php?action=saveNewPost", data: {text: text, img: encodeURIComponent(base64img)}, contentType: "application/x-www-form-urlencoded;charset=UTF-8", success: function(){ //... } }); ``` on the server this goes to this line: ``` saveImage(utf8_decode($_POST['img'])); ``` which calls: ``` function saveImage($base64img){ define('UPLOAD_DIR', '../uploads/'); $base64img = str_replace('data:image/jpeg;base64,', '', $base64img); $data = base64_decode($base64img); $file = UPLOAD_DIR . uniqid() . '.jpg'; file_put_contents($file, $data); } ``` However, the file isn't saved. What could be wrong?

Original source