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