How to create different media uploader frames / filter library depending on a custom action

Question

Here is the thing. I am using the WP media uploader on the frontend. What I need is to have it behave differently depending on a certain action.

I am attaching the media in a specific custom post type single page.

This is a small excerpt from my code. I'm using this to trigger the media library.

var uploader = wp.media({
        title: 'Upload Image',
        multiple: false
    }).open()
    .on('select', function(e){
    // Some code here
    });

Then I am filtering the library to show only certain attachments in the library, by using this filter here and by using the $_REQUEST to get the current post id:

function show_current_user_attachments( $query = array() ) {

   //Modify the query here to show current user attachments only
   return $query;
}
add_filter( 'ajax_query_attachments_args', 'show_current_user_attachments', 10, 1 );

So far so good but I need another separate piece of logic on the current post. I need to trigger another wp.media that is entirely different from this one. It needs to not have the upload image functionality and it needs to show different attachments in the library.

Simply put, my question is how can I extend the wp.media and pass different arguments that I can process in the 'ajax_query_attachments_args' filter so I have 2 entirely different media popups with different functionality?

Thanks in advance!

Answer 1

You will have to create two different media modals that are fired depending on your click event. Here is some code from a recent project where I added these buttons to the tinyMCE visual editor:

jQuery(document).ready(function($){
$(document).on('click', '.mce-my_upload_button', upload_image_tinymce);
$(document).on('click', '.mce-my_upload_pdf_button', upload_pdf_tinymce);

function upload_image_tinymce(e) {
    e.preventDefault();
    var $input_field = $('.mce-my_input_image');
    var custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add Image',
        button: {
            text: 'Add Image'
        },
         library: {
            type: 'image'
        },
        multiple: false
    });
    custom_uploader.on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $input_field.val(attachment.sizes.medium.url);
    });
    custom_uploader.open();
}
function upload_pdf_tinymce(e) {
    e.preventDefault();
    var $input_field = $('.mce-my_input_pdf');
    var custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add PDF',
        button: {
            text: 'Add PDF'
        },
        library: {
            type: 'application/pdf'
        },
        multiple: false
    });
    custom_uploader.on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $input_field.val(attachment.url);
    });
    custom_uploader.open();
}});

Hope this helps!