How to get selection from Wordpress 3.5 media uploader

Question

I am trying to get the selection from a default instance of the new media uploader...

I am happy with the way it displays by default so I am NOT using:-

file_frame = wp.media.frames.file_frame = wp.media(
{
    title: 'Select File',
    button: {
        text: jQuery( this ).data( 'uploader_button_text' )
    },
    multiple: false
});

Just

wp.media.editor.open();

so this doesn't work obviously

attachment = file_frame.state().get('selection').first().toJSON();

but neither does this

wp.media.editor.state().get('selection').first().toJSON();

or this

wp.media.state().get('selection').first().toJSON();

so what is the code I should use?

in media-models.js at 896 there is this which returns what I need but I cannot workout what to bind the listener to to listen for 'selection:single':- this._single.trigger( 'selection:single', this._single, this ); I cant for the life of me work out what 'this' is referring to — David O'Sullivan, Feb 25 '13 at 23:11
wp.media.controller.state().get('selection') doesn't work either I have tried literally hundreds of thing now... I can see that the 'selection:single' triggers this.controller.state().get('selection') but cannot work out what this refers to... — David O'Sullivan, Feb 26 '13 at 00:01
wp.media.view.Attachment.controller.state().get('selection') doesn't work — David O'Sullivan, Feb 26 '13 at 00:02
Please, please,please can someone help me out here, I have been searching now for almost the entire day. All I need is the id of the selected item... I have tried everything I can think of now literally nothing comes back with any data. Please can someone help me out... — David O'Sullivan, Feb 26 '13 at 01:04
So just to clarify, I either need to bind a function to the selection event and get the id from the data, or bind a function to the click on the media item and then get the data about the item that was clicked... — David O'Sullivan, Feb 26 '13 at 01:14

score 3 · Answer 1 · answered Mar 21 '13 at 00:26

You could try something like this (for a multi-select)... no guarantee it works though:

var selection = wp.media.editor.state().get('selection');

var attachment_ids = selection.map( function( attachment ) {
  attachment = attachment.toJSON();
  return attachment.id;
}).join();

score 1 · Answer 2 · edited Apr 13 '17 at 12:37

An adaptation of an answer from here: https://wordpress.stackexchange.com/questions/87357/wordpress-media-manager-3-5-default-link-to

Extending the render function of wp.media.view.Settings.AttachmentDisplay, which then gives access to this.controller.state().get('selection'):

function($) {
   var _AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay;
   wp.media.view.Settings.AttachmentDisplay = _AttachmentDisplay.extend({
      render: function() {
         _AttachmentDisplay.prototype.render.apply(this, arguments);
         selection = this.controller.state().get('selection').first().toJSON();
     //now, for example:
         filename = selection.filename;
      }
   });
})();

score 1 · Answer 3 · answered Aug 05 '16 at 09:15

I know this is a old thread, but I stumbled upon this from a Google search for getting all attachment ids when uploading multiple files.

I slightly adapt Adal's answer, which works perfectly:

                var selection = wp.media.state().get('selection');

                var attachment_ids = selection.map( function( attachment ) {
                    attachment = attachment.toJSON();
                    return attachment.id;
                }).join();

Just adding this as a reference, as Adal got no feedback on the answer back then (and I don't have enough reputation to leave a comment yet).

score 0 · Answer 4 · answered Feb 26 '13 at 17:11

Ok I have a hacky solution to this until someone out there hopefully can post how to do it properly...

jQuery('.media-modal .type-image').on('click',function(index, element) {
var thisCollection = wp.media.model.Query.all._byCid;
setTimeout(function() { //we need this becuse the details area is not generated until after the click
    var thisEditUrl = jQuery('.details .edit-attachment').attr('href');
    var attachId = thisEditUrl.match(/post=([^&]+)/)[1];
    var attachmentAtts = '';
    jQuery.each(thisCollection, function(index,item) {
        if(this.id == attachId)
            attachmentAtts = this.attributes;
    });
},500);
});

Its not ideal because of the setTimeout since we dont know how long it will take for the .details area to be populated but after a day and a half of trying I just cannot work out any other way.

Hopefully someone out there knows how to do this right ;)

How to get selection from Wordpress 3.5 media uploader

4 Answers4