Switch to the library tab in the media uploader

I’m developing a plugin that adds a tab to the media uploader to add external videos to the media library via oembed. Everything works as expected but I need to switch to the library tab after adding a new external video via the new tab. This is part of the code I’m using:

wp.media.controller.Custom = wp.media.controller.State.extend({

    initialize: function(){
        this.props = new Backbone.Model({ custom_data: '' });
        this.props.on( 'change:custom_data', this.refresh, this );
    },

    refresh: function() {
        this.frame.toolbar.get().refresh();
    },

    customAction: function(){
        wp.media.post( 'add-oembed', {
            url:     this.props.get('custom_data'),
            post_id: wp.media.view.settings.post.id
        });

        this.frame.content.mode('browse');

    }

});

The line this.frame.content.mode('browse') is supposed to make the switch to the library tab, but I’m getting an error message that says:

TypeError: this.collection is undefined

Any ideas?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

After struggling around for days through the poorly documented media modal source code and using code from the gist (thanks, Fabien), I came up with a solution:

JS:

wp.media.controller.Custom = wp.media.controller.State.extend({

    initialize: function(){
        this.props = new Backbone.Model({ custom_data: '' });
        this.props.on( 'change:custom_data', this.refresh, this );
    },

    refresh: function() {
        this.frame.toolbar.get().refresh();
    },

    // called when the toolbar button is clicked
    customAction: function( controller ){
        // call the PHP function that inserts an oembed attachment to the database via AJAX
        wp.media.post( 'add-oembed', {
            url:     this.props.get( 'custom_data' ),
            post_id: wp.media.view.settings.post.id
        }).done( function( resp ) {
            // create an attachment model using the data from the AJAX response
            var attachment = wp.media.model.Attachment.create( resp );
            var edit = controller.state( 'insert' );
            // add the attachment to the library model
            edit.get( 'library' ).add( attachment );
        });

    }

});


wp.media.view.Toolbar.Custom = wp.media.view.Toolbar.extend({
    initialize: function() {
        _.defaults( this.options, {
            event: 'custom_event',
            close: false,
            items: {
                custom_event: {
                    text: wp.media.view.l10n.customButton,
                    style: 'primary',
                    priority: 80,
                    requires: false,
                    click: this.customAction
                }
            }
        });

        wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
    },

    refresh: function() {
        var custom_data = this.controller.state().props.get('custom_data');
        this.get('custom_event').model.set( 'disabled', ! custom_data );
        wp.media.view.Toolbar.prototype.refresh.apply( this, arguments );
    },

    // triggered when the button is clicked
    customAction: function(){
        this.controller.state().customAction( this.controller );
        // switch to the library view
        this.controller.setState( 'insert' );
    }

});

PHP:

add_action('wp_ajax_add-oembed', 'custom_add_oembed');

function custom_add_oembed() {
    $url = $_POST['url'];
    $post_ID = intval($_POST['post_id']);

    if (!current_user_can( 'edit_post', $post_ID ) ) {
        wp_send_json_error();
    }

    $oembed = new WP_oEmbed();
    $provider = $oembed->discover($url);
    if($provider === false && substr($url, 0, 5) === 'https') {
        $url = str_replace('https', 'http', $url);
        $provider = $oembed->discover($url);
    }
    if($provider === false) {
        wp_send_json_error();
    }

    $response = $oembed->fetch($provider, $url);
    if( $response === false) {
        wp_send_json_error();
    }

    $my_post = array(
        'post_parent'   => $post_ID,
        'post_title'    => $response->title,
        'post_content'  => '',
        'post_status'   => 'inherit',
        'post_author'   => get_current_user_id(),
        'post_type'     => 'attachment',
        'guid'          => $url,
        'post_mime_type'=> 'oembed/' . $response->provider_name
    );
    $attachment_id = wp_insert_post( $my_post );
    if( ! is_int($attachment_id) ) {
        wp_send_json_error();
    }

    if ( ! $attachment = wp_prepare_attachment_for_js( $attachment_id ) ) {
        wp_send_json_error();
    }

    wp_send_json_success( $attachment );

}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0