I'm trying to use the new wp.media uploader frame for an app I'm building. I've read up a lot on other questions, blog posts, etc etc.

The code I pasted below is working already quite fine and even does some extra stuff that I left in for reference in case it's useful to anyone.

But there is one modification I'd like to bring to it: when the frame is opened, I want it to filter the "media library" display to only show attachment defined by a list of IDs that I provide.

Here is my current code:

// Uploading files
 var file_frame;

 $('.upload_attachments_button').on('click', function( event ){


// If the media frame already exists, reopen it.
if ( file_frame ) {

// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
  title: jQuery( this ).data( 'uploader_title' ),
  button: { text: jQuery( this ).data( 'uploader_button_text' ) },
  library : { type : 'image' },
  multiple: true  // Set to true to allow multiple files to be selected

   // When frame is open, select existing image attachments from custom field
file_frame.on( 'open', function() {

var selection = file_frame.state().get('selection');
var attachment_ids = jQuery('#attachment_ids').val().split(',');

// This is my attempt at showing only attachment with ID 275 --> but doesn't work!
file_frame.state().set( 'library', media.query({ id: 275 }) );

attachment_ids.forEach(function(id) {
  attachment = wp.media.attachment(id);
  selection.add( attachment ? [ attachment ] : [] );

  // When images are selected, place IDs in hidden custom field and show thumbnails.
file_frame.on( 'select', function() {

var selection = file_frame.state().get('selection');

// Place IDs in custom field
var attachment_ids = selection.map( function( attachment ) {
  attachment = attachment.toJSON();
  return attachment.id;
if( attachment_ids.charAt(0) === ',' ) { attachment_ids = attachment_ids.substring(1); }
$('#attachment_ids').val( attachment_ids );

// Show Thumbs
var attachment_thumbs = selection.map( function( attachment ) {
  attachment = attachment.toJSON();
  if( attachment.id != '' ) { return '<img src="' + attachment.sizes.thumbnail.url + '" id="id-' + attachment.id + '" />'; }
}).join(' ');


// Finally, open the modal

 // Place selected thumbnail ID into custom field to save as featured image 
 $(document).on('click', '#thumbs img', function() {
 $('#thumbs img').removeClass('chosen');
 var thumb_ID = $(this).attr('id').substring(3);

I'm attempting to filter the media library display as seen here, but it gives no results:

file_frame.state().set( 'library', media.query({ id: 275 }) );

Does anyone know how to write the syntax?

  • Please post your solution if you have one, I'd be really curious to see it. Mar 29, 2013 at 16:29

1 Answer 1


You can always filter on the client side:

var query = wp.media.query();

query.filterWithIds = function(ids) {
    return _(this.models.filter(function(c) { return _.contains(ids, c.id); }));

var res = query.filterWithIds([6,87]); // change these to your IDs

    console.log( v.toJSON() );

Disclaimer: found the beautiful filterWithIds function in this SO question.

  • dalbaeb, the code looks amazing. I tried pasting it into the section that runs on "open" of the frame but there is no effect. Should I rewrite the way I am creating the frame altogether by creating a new collection as seen in the example you quoted?
    – Adal
    Apr 6, 2013 at 0:06
  • It was just an example of how to fetch what you need, I didn't intend it to fit right into your code. It all depends on what file_frame.state().set() function accepts. You'd ideally paste my code before that line and try to feed what you get out of query.filterWithIds() into your set() call. Apr 6, 2013 at 1:09
  • 1
    It seems to me that this is no longer relevant. It didn't work for me as soon as I tried it. May 28, 2021 at 15:20
  • Well it's from 2013. Probably the API has changed. May 29, 2021 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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