XMLHttpRequest works but no response/status back on callback

Question

I have an XMLHttpRequest where i am sending an image across to be saved on my Amazon s3 bucket. It works correctly and the file goes to my bucket but i am getting no response back saying it is in process or has successfully uploaded. My code is below:

Javascript code in html page:

var ajax = new XMLHttpRequest();

ajax.open("POST",'http://www.xxxx.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(theImage);

ajax.onreadystatechange=function(){
    if (ajax.readyState==4 && ajax.status==200) {                                           
        console.log('success');  
    }
    else {                                           
        console.log('ongoing...');
    }
}

PHP code in xxxx.php:

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])){
    $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
    $filteredData = substr($imageData, strpos($imageData, ",")+1);
    $imgFileString = base64_decode($filteredData);
    $s3Filename = time().'.png';

    if($s3->putObjectString($imgFileString, $bucket , $s3Filename, S3::ACL_PUBLIC_READ) ){
        echo "SUCCESS";
    }
    else{
        echo "ERROR";
    }
}
else {
    echo "EMPTY";
}
?>

How can i get a callback to say when the upload has successfully been uploaded or if an error has occurred?

Answer 1

ajax.open("POST",'http://www.xxxx.php',false);
                                       ^^^^^^

You are making a synchronous request, so the request is being made and the response received before you assign your event handler. Don't do that. Remove false (or change it to true).