4

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?

  • Any progress on this? I'm looking into a similar solution. – jgraup Dec 10 '15 at 0:57
5

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 
}
  • 2
    You, sir... I will remember you in my will. ;) I have put this problem on hold since i wrote this post. then, today i got an email about this post, tried your if/else-statement and it just worked. Thanks!! – gubbfett Dec 10 '15 at 17:09
  • @gubbfett pay forward... like with up votes ;) Really I just followed your notes - fresh set of eyes I guess. – jgraup Dec 10 '15 at 17:13
  • 1
    I got problem that wp.media.frame.library accepts wp.media.frame.content.get() !== null . if we swap the conditions like if(wp.media.frame.library){...} else if(wp.media.frame.content.get().collection){...} everything works fine. Is the accepted answer really tested in both media.manager (edit post) vs Library Grid view modal? – Jonas Lundman Oct 20 '18 at 9:32
  • @JonasLundman - I don't remember testing this very extensively 3 years ago but I might take a look again. – jgraup Oct 22 '18 at 20:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.