Add “upload media” button in meta box field

by

I have a custom post which has a meta tag that needs to be using a file upload (for video files). I am wondering, what is the correct way of adding an “Upload” button that points to the WordPress media uploader and sets the url of the selected uploaded file to the text field that caused that associates the upload button.

I am not looking for code on creating the actual meta tag option, but for a way to actually add a WordPress media upload button properly.

2

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&amp;TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});

Leave a Comment