How to submit data between wp_iframe and backbone.js in media upload

In short:
On a post/page edit.php I want to be able to

  1. click Add media and open the default media uploader
  2. instead of Create Gallery on the left-side menu there is a custom tab.
  3. on this custom tab the user can choose/select custom stuff (e.g.: a custom setting).
  4. the user clicks a button (like Create new gallery) and a shortcode is inserted into the editor


  1. the shortcode can be edited afterwards (like edit gallery)

What I have so far:
I can create the custom tab in the default media uploader and display the content.
How to extend Media Library (WP 4.4)

// add the tab
add_filter('media_upload_tabs', 'my_upload_tab');
function my_upload_tab($tabs) 
  $tabs['mytabname'] = "My Tab Name";
  return $tabs;

// call the new tab with wp_iframe
add_action('media_upload_mytabname', 'add_my_new_form');
function add_my_new_form() {
    call custom scripts and styles
  wp_iframe( 'my_new_form' );

// the tab content
function my_new_form() 
    load all relevant functions
  echo '<p>Example HTML content goes here.</p>';

What I also know is, that I can extend the via backbone.js.
But I’m just beginning to learn / understand backbone.

I also know that you can open a pure media library frame and retrieve the selected image id or url or whatever information the attachment provides through jquery:

var custom_uploader ={
    title: 'Insert image',
        library : {
            // uncomment the next line if you want to attach image to the current post
            // uploadedTo :, 
            type : 'image'
        button: {
            text: 'Use this image' // button label text
        multiple: false // for multiple image selection set to true
    }).on('select', function() { // it also has "open" and "close" events 
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $(button).removeClass('button').html('<img class="true_pre_image" src="' + attachment.url + '" style="max-width:95%;display:block;" />').next().val(;
        /* if you sen multiple to true, here is some code for getting the image IDs
        var attachments = frame.state().get('selection'),
            attachment_ids = new Array(),
            i = 0;
        attachments.each(function(attachment) {
            attachment_ids[i] = attachment['id'];
            console.log( attachment );

But when I use this 2nd approach, I’m restricted to all attachment types and I can’t insert a shortcode into the editor.
So I figured the first method would bring me closer to my goal.

If anyone has a better approach at hand, please let me know.

If there isn’t, the remaining questions are:

  1. How can I present custom data (e.g. from an option) to the Backbone.View?
    do I have to localize a script to achieve this or is this somehow done using a template script?

  2. How can I create a button (or a function, to be precise) that closes the upload-iframe and inserts whatever i want into the editor?
    I know that media_send_to_editor($html) is somehow involved, but i don’t know how.

So, has anyone any suggestions or could point me in the right direction?

Solutions Collecting From Web of "How to submit data between wp_iframe and backbone.js in media upload"