How to add new tab to media upload manager with custom set of images?

by

This is an old thread but for me still as still as relevant.
I have been fiddling and has come up with this code for adding a media tab here, maybe someone want to continue for how the handle content for the tab? 🙂

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'my-media-tab', plugin_dir_url( __FILE__ ) . '/js/mytab.js', array( 'jquery' ), '', true );
});

And then the js file:

var l10n = wp.media.view.l10n;
wp.media.view.MediaFrame.Select.prototype.browseRouter = function( routerView ) {
    routerView.set({
        upload: {
            text:     l10n.uploadFilesTitle,
            priority: 20
        },
        browse: {
            text:     l10n.mediaLibraryTitle,
            priority: 40
        },
        my_tab: {
            text:     "My tab",
            priority: 60
        }
    });
};

EDIT:
Ok, so. For handling the content i have not found a nice way to do this by wp.media. My current solution are 2 liseners, one for opening the media library and one for clicking in the media router menu;

jQuery(document).ready(function($){
    if ( wp.media ) {
        wp.media.view.Modal.prototype.on( "open", function() {
            if($('body').find('.media-modal-content .media-router a.media-menu-item.active')[0].innerText == "My tab")
                doMyTabContent();
        });
        $(wp.media).on('click', '.media-router a.media-menu-item', function(e){
            if(e.target.innerText == "My tab")
                doMyTabContent();
        });
    }
});

the function doMyTabContent(); is just something like;

function doMyTabContent() {
    var html="<div class="myTabContent">";
    //My tab content here
    html += '</div>';
    $('body .media-modal-content .media-frame-content')[0].innerHTML = html;
}

I’m very sure this can be done in a much more delicate way. Whoever reads this and has a better solution, please fill in 🙂

Leave a Comment