Wordpress Media Manager - limit to specific mime type

Question

I am working on a CPT in which I need to add some meta fields with which user can attach media. There is a condition to attach any one mime-type attachment to single post.

I created a two meta fields, 1) attachment type and 2) attachment. In Attachment Type user can select attachment types, like document, pdf, audio, video or image. And, in second field user can select media from media manager.

Now, I am facing issue that some time user is selecting different type of media than select attachment type. Like, he is selected the attachment type Video and attached the Image or Audio file with post.

How can I limit the Media Manager to specific mime-type? Like if user is selected the Audio then Media Manager will only display the audio files only. Or, if the user is selected the Image then display the images only in Media Manager.

Answer 1

This is not full solution, it's only a direction for you to work with media uploader

Firstly, you need to know how to implement Media Uploader in your plugin/theme. You can learn that from the file: wp-admin/js/custom-background.js which is used by WP for custom background page.

If that's too hard to understand, then read this tutorial, it explains each line of code for you.

Secondly, when you implement Media Uploader, you know there's an option object for the media frame. That object contains a list of many options, which are non-documented. We can see them only by viewing the wp-includes/js/media-views.js file.

For your need, you need to pass an option type for library, some thing like this:

// Create a frame only if needed
if ( !frame )
{
    var frameOptions = ( {
        className   : 'media-frame rwmb-file-frame',
        multiple    : true,
        title       : 'Select files'
    } );

    if ( mimeType )
    {
        frameOptions.library = {
            type : mimeType
        };
    }

    frame = wp.media( frameOptions );
}

// Open media uploader
frame.open();

// Remove all attached 'select' event
frame.off( 'select' );

// Handle selection
frame.on( 'select', function() {... } );

There's variable in the code: mimeType, and you need to pass value to it using jQuery when user choose a type from your 1st input field.