Use AJAX to fetch Current Post Thumbnail for WordPress when Uploaded throughMedia Uploader Frontend

So,

In question you stated that the code needs to execute when the thickbox closes.

We can solve your problem with 2 approaches, first is to check for thumbnail url change every x seconds, and then update the img if the url changes, this works good but its data heavy, so I cant recommend that.

Second method is, to have the event of thickbox close to be used, whenever the thickbox closes, run an AJAX call that returns the thumbnail url, and this URL is then put into content.


jQuery(".Thumbnail.Close").click(function(){
jQuery.ajax({
url: "/wp-admin/admin-ajax.php",
type: "POST",
data: {'ID' : '<?php echo $thispost->ID; ?>', 'action': 'Featured_Image'},
dataType:'json',
success: function(response){
        console.log(response['img']);
        jQuery('.Thumbnail-IMG').attr('src', response['img']);
}
});

Here I assume that the Class for closing the thickbox is .Thumbnail.Close I tested this code on a normal iFrame, because most of readers of this answers probably would be doing a normal iframe implementation only.

So when the thumbnail close button is clicked we run an AJAX call, here I used PHP to put Post ID into JS data, incase you want to it differently, you can use hidden input field to store Post Id, and then retrive it using JS too.

Next Up here’s the code for the AJAX php portion.

function Featured_Image(){
        if (has_post_thumbnail($_POST['ID'])) {
            $return_data= array('img'=> get_the_post_thumbnail_url($_POST['ID'], 'full'));
        }
         wp_send_json($return_data);
        exit;
}

add_action( 'wp_ajax_nopriv_Featured_Image', 'Featured_Image' );

add_action( 'wp_ajax_Featured_Image', 'Featured_Image' );