Über WordPress-Media-Uploader hochgeladenes Bild in Platzhalter sofort sichtbar machen

Im Formular sind dafür drei Elemente erforderlich: Ein Platzhalterbild mit der Klasse media-image, ein Nummernfeld mit der Klasse media-image-id, und ein Button mit Klasse upload-button.

$options = get_option('ppp_test_settings');
$background_image_id = ( !empty($options['page_background_id']) ? $options['page_background_id'] : '' );
$thumbnail = ( '' != $options['page_background_id'] ? wp_get_attachment_image_url( $background_image_id, 'medium' ) : plugin_dir_url( dirname(__FILE__ ) ) . 'images/placeholder.png' ); ?>
<img class="media-image media" src="<?php echo esc_url( $thumbnail ); ?>"/>
<input type="number" class="media-image-id" readonly="readonly" name="ppp_test_settings[page_background_id]" value="<?php echo absint( $background_image_id ); ?>" />
<input class="upload-button" type="button" value="Upload" />

Nicht vergessen, vor dem Einbinden der Javascript-Datei media-upload.js wp_enqueue_media() einzufügen (Hinweis darauf dass diese Komponente fehlt ist unter anderem die Fehlermeldung wp.media is not defined).

function enqueue_media_uploader( $hook ) {
	if ( $hook === 'settings_page_ppp-test-plugin' ) {
		wp_enqueue_media();
		wp_enqueue_script( 'ppp-test-plugin', plugin_dir_url( dirname(__FILE__ )) . 'js/media-upload.js', array( 'jquery'), '', true );
	}
}
add_action( 'admin_enqueue_scripts', 'enqueue_media_uploader' );

media-upload.js

jQuery(document).ready(function($) {
    var mediaUploader;

    $(document).on("click", ".upload-button", function() {

        var image  = $(this).closest('.uploader').find('.media-image');
        var image_id = $(this).closest('.uploader').find('.media-image-id');

        if (mediaUploader) {
            mediaUploader.open();
            return;
        }

        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'choose_image',
            button: {
                text: 'choose_image'
            },
            multiple: false
        });

        mediaUploader.on('select', function() {
            attachment = mediaUploader.state().get('selection').first().toJSON();
            image_id.val(attachment.id);
            image.attr('src', attachment.url);
        });

        mediaUploader.open();

    });
});