Hello guys I successfully found a method that claims to make a file input file into a base 64 string in JavaScript so I successfully sent that base 64

string by JSON via AJAX and the base 64 encoded string looks like this sent in the JSON method "photo":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wB etc...."

So when the base 64 string arrives in the PHP file. The PHP does it's magic and successfully store a file in the targeted folder where I want the file to be at so when I look in that folder there is a file but

when I try to open the photo file to view it the photo viewer app says something like, image.jpg it looks like we don't support this file format and in other photo viewer apps it will say something

similar to that so what have I done wrong?

Here is my code

index.php

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

var photo= photo_input_result;

//<JSON data>

var upload_info = {
first_name: "John",
last_name: "Smith",
photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info);

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

x.php

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;

//Photo upload section

$photo= $upload_info_json_object->photo;

base64_decode($photo);

$path= $_SERVER['DOCUMENT_ROOT'].'/send-json-data-by-ajax/object-based/with-file/2/images/image.jpg';

file_put_contents($path, $photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

    Added [code]...[/code] tags to the original post.

      Looks like you need to assign the results to whatever is going to be output. This just does the operation then discards the result -- it does not change $photo:

      base64_decode($photo);

      If desired, you could remove that line and just do this for the output:

      file_put_contents($path, base64_decode($photo));

        Another thing you'll need to do is trim off the initial part of the URL from its base64-encoded payload (as the JavaScript says, it's readAsDataURL not encodeAsBase64). Namely, the bit that says data:image/jpeg;base64,. Obviously that media type might change depending on what is being uploaded, but generally everything up to the comma is URL not data.

        Edit. Again, as this has come up an earlier thread, it took me a while to remember that, since it is a data: URL, it could just be read from directly: copy($photo, $path);.

          thank you my issue has been solved

          [Mod: You didn't need to repost your entire original question with an embedded spam link just to say this]

            Write a Reply...