15

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.

12

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;
    });

});
  • 2
    Just a little reminder via the Codex page for admin_print_scripts says that admin_print_scripts mainly used to echo inline javascript. admin_print_scripts should not be used to enqueue styles or scripts on the admin pages. Use admin_enqueue_scripts instead. – Zulian Jan 22 '13 at 10:47
  • I tried this method and the text input box #upload_image is never populated – Mr Pablo Jul 7 '16 at 11:19
  • 1
    this answer doesnt work. see other answers. – T.Todua Sep 1 '16 at 14:19
0

Solution:

1) in your functions.php, add the block for registering the necessary scripts:

// add necessary scripts
add_action('plugins_loaded', function(){
  if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
  }
});

function my_admin_scripts(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('media-upload');
  wp_enqueue_script('thickbox');
}

// Proper way to enqueue
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dependencies */
// );
//
// wp_enqueue_script('my-upload');

function my_admin_styles(){
  wp_enqueue_style('thickbox');
}

2) and then add metabox block:

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'my-metaboxx1-title', // Title
      'func99999', // Callback (Construct function)
      get_post_types(), //screen (This adds metabox to all post types)
      'normal' // Context
    );
 },
 9
);
function func99999($post){
  $url = get_post_meta($post->ID, 'my-image-for-post', true); ?>
  <input id="my_image_URL" name="my_image_URL" type="text"
         value="<?php echo $url;?>" style="width:400px;" />
  <input id="my_upl_button" type="button" value="Upload Image" /><br/>
  <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
  <script>
  jQuery(document).ready( function($) {
    jQuery('#my_upl_button').click(function() {
      window.send_to_editor = function(html) {
        imgurl = jQuery(html).attr('src')
        jQuery('#my_image_URL').val(imgurl);
        jQuery('#picsrc').attr("src", imgurl);
        tb_remove();
      }

      formfield = jQuery('#my_image_URL').attr('name');
      tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
      return false;
    }); // End on click
  });
  </script>
<?php
}

add_action('save_post', function ($post_id) {
  if (isset($_POST['my_image_URL'])){
    update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']);
  }
});





p.s. in case you need multiple fields, then you can easily do like this: http://pastebin.com/raw/xpU1ch2W

  • Works like a charm, but only with images. How can I do the same with video files? – Alex Jul 18 '18 at 14:57

protected by Community Aug 18 '16 at 6:50

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.