Add a Media Uploader Button to a Custom Metabox

There are 4 steps to follow to add a media uploader button to a custom metabox in WordPress.

The quick overview is that you need to add a javascript function to the admin part of your WordPress plugin, add a button to your metabox (that includes the correct references from the javascript function), make sure you button contains the correct class and data attribute, and add the target input (that also references the javascript function).

For the purposes of this example, we’re using the WordPress Plugin Boilerplate (WPPB) framework when building out WordPress plugins. Check out our post introducing working with the WordPress Plugin Boilerplate if you would like to learn more.

Step 1: Add the following to your class-plugin-name-admin.js file

The following javascript function connects WordPress’ Media Uploader functionality to the button with a class of custom-plugin-media-button. This allows you to add a media uploader button to a custom metabox.

var CustomPluginMediaUploader = {
construct:function(){
        // Run initButton when the media button is clicked.
	$( '.custom-plugin-media-button' ).each(function( index ) {
              CustomPluginMediaUploader.initButton($(this));
	});
},
initButton:function(_that){
    _that.click(function(e){
	// Instantiates the variable that holds the media library frame.
	var metaImageFrame;
       // Get the btn
		var btn = e.target;

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

		// Get the field target
		var field = $( btn ).data( 'custom-plugin-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();
    });
}
};
CustomPluginMediaUploader.construct();

Step 2: Add the custom-plugin-media-button class to the button element you want to use as an uploader in a custom metabox, in settings, or options

The button below needs to be added to the metabox via the class-plugin-name-admin.php file. You need to use the custom-plugin-media-button class as it is referenced in the javascript function above.

<button class="button custom-plugin-media-button">Upload File</button>

While your class-plugin-name-admin.php file may be structured differently, I included the following in my custom_post_type_data_meta_box function.

echo '<button class="button link-tracking-media-button">Upload File</button>';

That echo is included in the _data_meta_box function because it is the callback function (the 3rd parameter of the add_meta_box function shown below) from the add_meta_box WordPress function. The add_meta_box WordPress function should look like this then:

add_meta_box('custom_post_type_data_meta_box', 'Custom Post Type Data', array($this,'custom_post_type_data_meta_box'), 'custom_post_type', 'normal','high' );

Step 3: Add custom-plugin-media-uploader-target data attribute to that same button element

You also need to add the data-custom-plugin-media-uploader-target to the button element. You need to do this because this data attribute tells the javascript function above where to place the URL from the Media Library if selected to be used on the page.

<button class="button custom-plugin-media-button" data-custom-plugin-media-uploader-target=".plugin-name-url">Upload File</button>

Step 4: Add the target input element mentioned in the data attribute to your metabox, settings page, or options page.

Add the following input to your custom metabox and make sure the input class is called plugin-name-url via the class-plugin-name-admin.php file.

<input class="plugin-name-url" type="hidden">

In my structure, I added the element above by adding the following code to my class-plugin-name-admin.php file’s custom_post_type_data_meta_box function.

$args = array (
									'type'      => 'input',
						'subtype'	  => 'hidden',
						'id'	  => $this->plugin_name.'_url',
						'name'	  => $this->plugin_name.'_url',
						'required' => 'required="required"',
						'get_options_list' => '',
						'value_type'=>'normal',
						'wp_data' => 'post_meta',
						'post_id'=> $post->ID
							);
					// this gets the post_meta value and echos back the input
			$this->plugin_name_render_settings_field($args);