Using WordPress 3.5 Media Uploader in meta box?

5 comments

1. To get you started, the basic functions and overrides as far as I know currently.There might be better solutions, but I only had two days with 3.5 yet:

   // open modal - bind this to your button
       if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
           wp.media.editor.open( ##unique_id_here## );
   
   // backup of original send function
      original_send = wp.media.editor.send.attachment;
   
   // new send function
      wp.media.editor.send.attachment = function( a, b) {
          console.log(b); // b has all informations about the attachment
          // or whatever you want to do with the data at this point
          // original function makes an ajax call to retrieve the image html tag and does a little more
       };
   
   // wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility
   
   // backup original window.send_to_editor
      window.original_send_to_editor = window.send_to_editor; 
   
   // override window.send_to_editor
      window.send_to_editor = function(html) {
          // html argument might not be useful in this case
          // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
      }
   

   This is not complete working answer. You have to define and keep track of your input fields by yourself etc.. This just should get you started.
   If you have more concrete questions, just ask.

   And make sure to reassign the original functions when your script is done.

   ---

   _{Pulled from comments:}

   How can I listen to the close event of the lightbox?

   // add listener: 
   wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }
   

   Log in to Reply

2. Here is a small tutorial on how to use WP 3.5 media uploader in theme options. That’s what I came up with and it works perfect for me. Let me know if you come up with any better solution.

   Here is how I have implemented the code in my theme options:

   jQuery(document).ready(function($){
     $('.stag-metabox-table .button').click(function(e){
     var send_attachment_bkp = wp.media.editor.send.attachment;
     var button = $(this);
     var id = button.attr('id').replace('_button', '');
     wp.media.editor.send.attachment = function(props, attachment){
       $("#"+id).val(attachment.url);
       wp.media.editor.send.attachment = send_attachment_bkp;
     }
   
     wp.media.editor.open(button);
     return false;
   
     });
   });
   

   Update

   This code works only on post edit page. To make it work on theme options page you need to add wp_enqueue_media();

   Log in to Reply

3. I’m doing almost the same it’s not ready yet but it works:

   in the php:

   <input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
   <?php
   do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id
   

   The javascript:

   jQuery('#default_featured_image_button').click(function () {
       var formfield = jQuery('#default_featured_image').attr('name');
       tb_show('', 'media-upload.php?type=image&TB_iframe=true');
       return false;
   });
   
   window.send_to_editor = function (html) {
       var imgurl = jQuery('img', html).attr('src');
       console.log(jQuery('img', html));
       console.log(html);
       console.log(imgurl);
       // set the url as the value
       jQuery('#default_featured_image').val(imgurl);
       tb_remove();
   };
   

   This will enable you to upload and send the image url (of any size) to the <input> element.
   I’m trying to do this as a setting it and it works, Only thig I need now is a reliable way to send the attachment ID to the <input>

   Log in to Reply

4. I think @janw has got this one completely right, but I was unable to make one thing work. Jan inserts the media library button using:

   do_action( 'media_buttons', 'default_featured_image' );
   

   and then pre-empts the default action using:

   jQuery('#default_featured_image_button').click(function () {...
   

   The problem that I ran into is that inserting a media button in this fashion does not assign an id of “default_featured_image_button” to the link. In fact it does not add any id on the inserted link. So this is what I did to get it to work.

   I added this line to my meta box callback function just after my input field:

   <input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />
   

   I then enqueued my custom jquery file and the thickbox css file, also in my functions.php file, using:

   add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');
   
   function jhsir_load_image_set_js() {
       wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
       wp_enqueue_style( 'thickbox' );
   }
   

   Finally my image-set.js file included the following:

   jQuery(document).ready(function($) {
   
       var formfield = null;
   
       $('#upload_logo_button, #upload_background_button').click(function() {
   
           $('html').addClass('Image');
   
           formfield = $(this).prev('input').attr('name');  
           formfield_id = $(this).prev('input').attr('id'); 
   
           tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
           return false;
       });
   
       // user inserts file into post.
       // only run custom if user started process using the above process
       // window.send_to_editor(html) is how wp normally handles the received data
   
       window.original_send_to_editor = window.send_to_editor;
       window.send_to_editor = function( html ) {
           var fileurl;
   
           if(formfield != null) {
               fileurl = $( 'img', html).attr('src');
   
               $( "#" + formfield_id ).val(fileurl);
   
               tb_remove();
   
               $('html').removeClass('Image');
               formfield = null;
           } else {
               window.original_send_to_editor(html);
           }
       };
   });
   

   You will note that I used variables to store the name and id of the input field that is just prior to the link that calls the jQuery. In that way this code can be used repeatedly on the same page. You would just need to assign a class to all buttons or use individual id’s for the buttons in your jquery as I did. I hope this helps someone as Jan’s answer did me.

   Log in to Reply

5. I know that this is an old post, but I just want to share my findings:

   To open the media editor, we call this function

   wp.media.editor.open();
   

   the media editor basically will check for tinyMCE editor (window.tinymce), then Quicktags (window.QTags), to pass the content to.

   For my approach to get the content, I assigned window.QTags with a custom object, which has an insertContent() method:

   var newObject = {
     insertContent: function(html){
       // to extract the image source
       $(html).find('img').attr('src');
     }
   }
   
   // assign the newObject to window.QTags property
   window.QTags = newObject;
   

   Reference: phpxref

   Log in to Reply