2 comments

1. What you’ve described is the older WordPress way of doing it… If you want to use the new uploader in WordPress 3.5+, you can create a wp.media object to upload it, similar to the code in wp-admin/js/custom-background.js:

              // Create the media frame.
               frame = wp.media.frames.customBackground = wp.media({
                   // Set the title of the modal.
                   title: $el.data('choose'),
   
                   // Tell the modal to show only images.
                   library: {
                       type: 'image'
                   },
   
                   // Customize the submit button.
                   button: {
                       // Set the text of the button.
                       text: $el.data('update'),
                       // Tell the button not to close the modal, since we're
                       // going to refresh the page when the image is selected.
                       close: false
                   }
               });
   
               // When an image is selected, run a callback.
               frame.on( 'select', function() {
                   // Grab the selected attachment.
                   var attachment = frame.state().get('selection').first();
   
                   // Run an AJAX request to set the background image.
                   $.post( ajaxurl, {
                       action: 'set-background-image',
                       attachment_id: attachment.id,
                       size: 'full'
                   }).done( function() {
                       // When the request completes, reload the window.
                       window.location.reload();
                   });
               });
   
               // Finally, open the modal.
               frame.open();
   

   the frame.on('select' function(){ code is run when a file is chosen.

   Log in to Reply

2. A litter further searching and I was able to find some good sources explaining how to do this. I went for a JavaScript, PHP mix:

   JavaScript

   $j('input').live('focusin',function(){
   
       var target = '#'+$j(this).attr('id');
   
       tb_show('','media-upload.php?post_id=[post_id]&tab=gallery&context=choose&TB_iframe=1');
   
       window.send_to_editor = function(html) {            
   
           fileurl = $j(html).attr('href');
           $j(target).val(fileurl);
           tb_remove();
   
       };
   
   });
   

   source: http://jaspreetchahal.org/wordpress-using-media-uploader-in-your-plugin/

   PHP

   /* Customize button */
   
   function media_uploader_btn($form_fields, $post) {
   
       $send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Choose This File' ) . "' />";
   
       $form_fields['buttons'] = array('tr' => "tt<tr class='submit'><td></td><td class='savesend'>$send</td></tr>n");
       $form_fields['context'] = array( 'input' => 'hidden', 'value' => 'choose' );
   
       return $form_fields;
   
   }
   
   /* Check for button context */
   
   function check_upload_image_context($context){
   
       if(isset($_REQUEST['context']) && $_REQUEST['context'] == $context){
   
           return true;
   
       } elseif(isset($_POST['attachments']) && is_array($_POST['attachments'])){
   
           /* check for context in attachment objects */
   
           $image_data = current($_POST['attachments']);
   
           if (isset($image_data['context']) && $image_data['context'] == $context ){
   
               return true;
   
           }
   
       }
   
       return false;
   }
   
   
   if(check_upload_image_context('choose')){
   
       add_filter('attachment_fields_to_edit', 'media_uploader_btn', 20, 2);
   
   }
   

   source: http://shibashake.com/wordpress-theme/how-to-hook-into-the-media-upload-popup-interface

   Log in to Reply