Adding a Media Uploader to a custom metabox

myplugin-media.js

/**
 * Load media uploader on pages with our custom metabox
 */
 jQuery(document).ready(function($){

	'use strict';

	// Instantiates the variable that holds the media library frame.
	var metaImageFrame;

	// Runs when the media button is clicked.
	$( 'body' ).click(function(e) {

		// Get the btn
		var btn = e.target;

		// Check if it's the upload button
		if ( !btn || !$( btn ).attr( 'data-media-uploader-target' ) ) return;

		// Get the field target
		var field = $( btn ).data( 'media-uploader-target' );

		// Prevents the default action from occuring.
		e.preventDefault();

		// Sets up the media library frame
		metaImageFrame = wp.media.frames.metaImageFrame = wp.media({
			title: meta_image.title,
			button: { text:  'Use this file' },
		});

		// Runs when an image is selected.
		metaImageFrame.on('select', function() {

			// Grabs the attachment selection and creates a JSON representation of the model.
			var media_attachment = metaImageFrame.state().get('selection').first().toJSON();

			// Sends the attachment URL to our custom image input field.
			$( field ).val(media_attachment.url);

		});

		// Opens the media library frame.
		metaImageFrame.open();

	});

});

myplugin-media.php

<?php

	/**
	 * Render the metabox
	 */
	function myplugin_render_metabox() {

		// Variables
		global $post;
		$saved = get_post_meta( $post->ID, 'myplugin_media_id', true );

		?>

			<fieldset>

				<div>
					<?php 
						/**
						 * The label for the media field
						 */ 
					?>
					<label for="myplugin_media"><?php _e( 'Field Label', 'events' )?></label><br>

					<?php 
						/**
						 * The actual field that will hold the URL for our file
						 */ 
					?>
					<input type="url" class="large-text" name="myplugin_media" id="myplugin_media" value="<?php echo esc_attr( $saved ); ?>"><br>

					<?php 
						/**
						 * The button that opens our media uploader
						 * The `data-media-uploader-target` value should match the ID/unique selector of your field.
						 * We'll use this value to dynamically inject the file URL of our uploaded media asset into your field once successful (in the myplugin-media.js file)
						 */ 
					?>
					<button type="button" class="button" id="events_video_upload_btn" data-media-uploader-target="#myplugin_media"><?php _e( 'Upload Media', 'myplugin' )?></button>
				</div>

			</fieldset>

		<?php

		// Security field
		wp_nonce_field( 'myplugin_form_metabox_nonce', 'myplugin_form_metabox_process' );

	}

	/**
	 * Load the media uploader and our custom myplugin-media.js file
	 * Change `myplugin_custom_post_type` to whatever the post type for your metabox is
	 * You may also need to change the `plugins_url()` path to match your plugin folder structure (currently assumes flat with no subfolders)
	 */
	function myplugin_load_admin_scripts( $hook ) {
		global $typenow;
		if( $typenow == 'myplugin_custom_post_type' ) {
			wp_enqueue_media();

			// Registers and enqueues the required javascript.
			wp_register_script( 'meta-box-image', plugins_url( 'myplugin-media.js' , __FILE__ ), array( 'jquery' ) );
			wp_localize_script( 'meta-box-image', 'meta_image',
				array(
					'title' => __( 'Choose or Upload Media', 'events' ),
					'button' => __( 'Use this media', 'events' ),
				)
			);
			wp_enqueue_script( 'meta-box-image' );
		}
	}
	add_action( 'admin_enqueue_scripts', 'gmt_events_load_admin_scripts', 10, 1 );

@intothevoid0 You can call the image URL from the metabox with the key myplugin_media_id just like you normally would get any meta data.

So, something like this should work:

Get the image URL from your metabox upload with the following PHP

<?php 
if ( get_post_meta( get_the_ID(), 'myplugin_media_id', true ) ) {
	$image_url = get_post_meta( get_the_ID(), 'myplugin_media_id', true );
} else {
	$image_url = ''; // You can put the fallback featured image code here if you want.
?>

Then you can add in the variable to your CSS (not within a .css file, but included via a PHP file)

.single-post .page-title { background-image: ( $image_url ); } ?>

Thank you it works like a charm 👍