3.5 WordPress media uploader manual implementation

2 Views

I’m having problems to understand how to implement new WP media uploader into my theme options page. Is there a documentation on how to do this or some explanation what-so-ever? I have seen couple of samples of how to do this but none of them has any good explanation about their code. Is there list of options how to customize media uploader frame? I mean wouldn’t it be good if you can do something like this (See // Create the media frame.): 

// Uploading files
var file_frame;
jQuery('.upload_image_button').live('click', function() {
    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: 'My frame title',
        button: {
            text: 'My button text',
        },
        id: 'logo-frame',
        multiple: false,

        editing_sidebar: false, // Just added for example
        default_tab: 'upload', // Just added for example
        tabs: 'upload, library', // Just added for example
        returned_image_size: 'thumbnail' // Just added for example


    });

    // When an image is selected, run a callback.
    file_frame.on( 'select', function() {
        var attachment;
        // We set multiple to false so only get one image from the uploader
        attachment = file_frame.state().get('selection').first().toJSON();

        // Do something with attachment.id and/or attachment.url here

    });

    // Finally, open the modal
    file_frame.open();
    return false
});
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. For WP 3.5, you can use the new media uploader. I’ll be brief in the hopes that you know what you’re doing. The idea is to call the wp_enqueue_script (this only works on WP >= 3.5 btw). Once the script is called, you can manipulate the javascript object. You’ll have to do some inspecting to see your full set of options.

    First you have to enqueue the script:

    add_action( 'wp_enqueue_scripts', 'front_upload_enqueues' );
function front_upload_enqueues() {
    wp_register_script('uploads', 
        // path to upload script
        get_template_directory_uri().'/lib/js/media-upload.js' 
    );
    wp_enqueue_script('uploads');
    if ( function_exists('wp_enqueue_media') ) {
        // this enqueues all the media upload stuff
        wp_enqueue_media();
    }
}

    Then you have to add the javascript (jQuery in my case):

    jQuery(document).ready(function($){
    var frame;
    /*
     * Upload button click event, which builds the choose-from-library frame.
     *
     */
    $('.form-table').on('click', '.member-upload-field .btn-upload', function( event ) {
        var $el = $(this);
        event.preventDefault();

        // Create the media frame.
        frame = wp.media.frames.customHeader = wp.media({
            title: $el.data('choose'),
            library: { // remove these to show all
                type: 'image', // specific mime
                author: userSettings.uid // specific user-posted attachment
            },
            button: {
                text: $el.data('update'), // button text
                close: true // whether click closes 
            }
        });

        // When an image is selected, run a callback.
        frame.on( 'select', function() {
            // Grab the selected attachment.
            var attachment = frame.state().get('selection').first(),
                link = $el.data('updateLink');

            $el.prev('input').val( attachment.attributes.id );
            $el.parent().prev().find('img').attr('src', attachment.attributes.url );
        });

        frame.open();
    });

});