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 );

Hey Chris, I had a quick question for you. Could this be used in addition to the featured image metabox for the default single post template? If so, would it be possible to have the image that you uploaded targeted by CSS? For example, the theme I'm currently using adds the featured image as the background-image for the .page-title class. Ideally, I would like to use your code and have the image utilized in the following code:

.single-post .page-title {background-image: (/uploaded-image.jpg);}

@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 👍