Refresh wp.media after ajax call

Question

I'm building a plugin where I add a tab to the media manager and can add stuff from another source. I add the tab with this, which generates a iframe:

add_filter('media_upload_tabs', 'add_myUpload_tab');
function add_myUpload_tab($tabs) {
    $tabs['myTab'] = "My tab";
    Return $tabs;
}
add_action('media_upload_myTab', 'add_myUpload_save_page');
function add_myUpload_save_page() {
    wp_iframe( 'myTab_save_frame' );
}
function myTab_save_frame()
{
    echo media_upload_header();
    ?><iframe to my other source/><?php
    /*** More code below ***/
}

So, in short there's an iframe in the iframe. :) The wp codex had an iframe in the example but I know it works without it. Any how.

When I play around in my iframe and in this presses a button, this page in the iframe sends a message. In the "More code below" I wrote above, I have this code:

<script>
    window.addEventListener('message', function(event) {
        //Setup variables
        var answer = event.data,
            wp = parent.wp;
        answer.url = answer.url.replace(/\.\w+$/ig,'');
        var data = {
          'action': 'add_my_image',
          'file': answer.url
        };
        jQuery.post(ajaxurl, data, function(response) {
            alert('My image was uploaded');
            /** From here and i below I want to do my wp.media stuff **/
        });
    });
</script>

And yes, I'm aware I'm not sending a nonce. This is just for testing. Everything works. What Ii now want to achieve is to get wp.media to refresh the library in the "Add media" -> "library" tab. And this is where I fail.

I found this thread but nothing here really helps. As you can see, since I am in the wp_iframe i have declared wp as parent.wp to call the wp.media stuff.

So far I have achieved to change the state so it's displaying the library, but not refreshed. I can do this with:

wp.media.frame.setState('insert');

but the strange thing is that after this no more js is running. If I, for example, add the line console.log('Hello world'); after this line the console is silent.

Therefore I suspect I have to refresh it before I set the state?

Any ideas how to select another frame/state/tab (the library one), refresh it and (if possible - not necessary) switch to it?

Answer 1

So, I followed your links and this is working for me. This test works the same for my upload callbacks so hopefully it works for you.

In the iframe

function myTab_save_frame()
{
    global $redir_tab;

    $redir_tab = 'mytab';

    media_upload_header(); ?>

    <button>Test Trigger</button>

    <script>
        var switchAndReload = function() {

            // get wp outside iframe

            var wp = parent.wp;

            // switch tabs (required for the code below)

            wp.media.frame.setState('insert');

            // refresh

            if( wp.media.frame.content.get() !== null) {
                wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
                wp.media.frame.content.get().options.selection.reset();
            } else {
                wp.media.frame.library.props.set ({ignore: (+ new Date())});
            }
        };

        jQuery('button').on('click', function(evt){

            // do upload logic...

            // upload completed.

            // refresh library!

            switchAndReload();
        });
    </script>
    <?php 
}