Display Media Uploader in Own Plugin on Wordpress 3.5

Question

I have little problem with Media Uploader in new WordPress 3.5. I created own plugin which is upload the picture. I'm using this code JS:

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

The code works fine, but unfortunately forms appears incomplete. When I select any picture doesn't show me 'Attachment Display Settings' on right side. I don't know why. I try add options to media:

displaySettings: true,
displayUserSettings: true

But it also doesn't work.

Answer 1

Only Uploader

below a example code, works only on post edit page. If you will use also on other page, then include the function wp_enqueue_media(), see the next headline.

jQuery(document).ready(function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.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', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Short explanation of Media Manager

1. At first include the relevant scripts, use the core function: wp_enqueue_media(); The function set up all the relevant settings, localizes menu text, and loads in all the appropriate javascript files.

   You can add custom script via wp_enqueue_script().

   // Also adds a check to make sure `wp_enqueue_media` has only been called once.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();
   

   Add also a default script for custom header: wp_enqueue_script( 'custom-header' ); This creates an image selection frame, and ties it to an interface element, for example a button or link. It then calls a url or our choice with the selected image id. This is the same script that is used when selecting theme custom header images.

2. Add the button to media manager:

   <?php
   $modal_update_href = esc_url( add_query_arg( array(
       'page'     => 'my_media_manager',
       '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
   ), admin_url( 'upload.php' ) ) );
   ?>
   
   <p>
   <a id="choose-from-library-link" href="#"
       data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
       data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
       data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
   </a> |
   </p>
   

3. Define Action Function last, you need to add in some code for processing the image id that we will pass to the data-update-link url.

   // Add to the top of our data-update-link page
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Process and save the image id
       $options = get_option( 'my_media_manager_options', TRUE );
       $options['default_image'] = absint( $_REQUEST['file'] );
       update_option( 'my_media_manager_options', $options );
   }
   

Sources and hints:

• http://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/
• http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
• https://github.com/AgencyPMG/PMG-WP-Core/commit/6a5a1ee818b9a8f03bf7df6e9f16b118f999355c
• Filter and Action Hooks: http://core.trac.wordpress.org/ticket/22186#comment:46

Answer 2

I have put a answer in the stackoverflow.com site as well and that would be help.

I'm using this method to use media uploader into my custom plugin.May be this would be help.

in the main theme file(index.php) add these.

wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');

In the admin_script.js file,

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

admin file(admin_settings.php),

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />

More details in my blog

More info http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Answer 3

Just use this code for media uploader . you got link in jquery response.

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>