Send a photo upload file in a JSON object via AJAX

See more:

Javascript

PHP

Ajax

I know there is posts online already that covers this subject but most examples are based on jQuery and I need to do this in plain JavaScript. I found a few rare JavaScript examples on this

subject online but I can't manage to get it working in my code structure. If any one can give me a code example of my code then I will really appreciate that.

This is my code.

index.php

<style>

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

</style>

<script>

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

document.querySelector('#submit').addEventListener('click',sendUploadInfo);

function sendUploadInfo(){

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

//<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; //<-????
///???

if(isset($_FILES['photo'])) {
$file=$_FILES['photo']['name'];
$location='images/'.$file;
move_uploaded_file($_FILES['photo']['tmp_name'],$location); 
}
//

?>

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

What I have tried:

Went to other help sites and no luck and no luck with google.