this is how I do to create upload button in metabox:
FILE: template_dir/functions.php
add this lines:
wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');
// Add the Meta Box
function add_custom_meta_box() {
add_meta_box(
'custom_meta_box', // $id
'Custom Meta Box', // $title
'show_custom_meta_box', // $callback
'post', // $page
'normal', // $context
'high'); // $priority
}
add_action('add_meta_boxes', 'add_custom_meta_box');
// Field Array
$prefix = 'custom_';
$custom_meta_fields = array(
array(
'name' => 'Image',
'desc' => 'A description for the field.',
'id' => $prefix.'image',
'type' => 'image'
)
);
// The Callback
function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Use nonce for verification
echo '';
// Begin the field table and loop
echo '';
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '
'.$field['label'].'
';
switch($field['type']) {
// case items will go here
// image
case 'image':
$image = get_template_directory_uri().'/images/image.png';
echo ''.$image.'';
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }
echo '
Remove Image
'.$field['desc'].'';
break;
} //end switch
echo '';
} // end foreach
echo ''; // end table
}
// Save the Data
function save_custom_meta($post_id) {
global $custom_meta_fields;
// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
} // end foreach
}
add_action('save_post', 'save_custom_meta');
FILE: template_dir/js/custom-js.js
jQuery(function(jQuery) {
jQuery('.custom_upload_image_button').click(function() {
formfield = jQuery(this).siblings('.custom_upload_image');
preview = jQuery(this).siblings('.custom_preview_image');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
classes = jQuery('img', html).attr('class');
id = classes.replace(/(.*?)wp-image-/, '');
formfield.val(imgurl); //get image url and copy to field
preview.attr('src', imgurl);
tb_remove();
}
return false;
});
jQuery('.custom_clear_image_button').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_upload_image').val('');
jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);
return false;
});
});
If you want to add more types of fields you can learn more at: Reusable Custom Meta Boxes Part 1: Intro and Basic Fields