Wordpress - Add "upload media" button in meta box field
See this media uploader skeleton. You can also use it in your custom markup, like Meta Box.
A hint, check, that you only use the scripts on the page, where you active your Meta Box. Otherwise is it often a problem on the default pages and the uploader.
Now a attempt to clear the important parts to include the uploader to your custom part.
First include an button in the meta box:
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
Now enqueue the scripts:
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
// better use get_current_screen(); or the global $current_screen
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}
The last part is your custom script to use the thickbox and the uploader inside this.
jQuery(document).ready( function( $ ) {
$('#upload_image_button').click(function() {
formfield = $('#upload_image').attr('name');
tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
window.send_to_editor = function(html) {
imgurl = $(html).attr('src');
$('#upload_image').val(imgurl);
tb_remove();
}
return false;
});
});