Show only images and videos in a wp.media window

Question

I'm using the following JS code to open a wp.media window to allow users to select images and videos for a gallery. Everything is working as expected, but I'm unable to restrict the window to show images and videos only, it's showing everything.

Any ideas on what might be wrong?

Thanks in advance

JS:

$( '#add_item' ).on( 'click', function( e ) {
    var $el = $( this );

    e.preventDefault();

    // If the media frame already exists, reopen it.
    if ( items_frame ) {
        items_frame.open();
        return;
    }

    // Create the media frame.
    items_frame = wp.media.frames.items = wp.media({
        title: 'Add to Gallery',
        button: {
            text: 'Select'
        },
        states: [
            new wp.media.controller.Library({
                title: 'Add to Gallery',
                filterable: 'all',
                type: ['image', 'video'],
                multiple: true
            })
        ]
    });

    // Finally, open the modal.
    items_frame.open();

});

Answer 1

It's been a while since this question was asked, but on the off chance that you are still looking for a solution:

items_frame = wp.media.frames.items = wp.media({
    title: 'Add to Gallery',
    button: {
        text: 'Select'
    },
    library: {
            type: [ 'video', 'image' ]
    },
});

Answer 2

With a bit more searching I found that you can specify the exact file type within the library property. This may come in handy when creating a plugin where only certain files are permitted.

var frame = wp.media({
        title: 'Insert movie',
        library: {type: 'video/MP4'},
        multiple: false,
        button: {text: 'Insert'}
    });

Unfortunately, there does not seem to be a list anywhere that specifies which values work for a particular extension.

Answer 3

$( '#add_item' ).on( 'click', function( e ) {
    var $el = $( this );

    e.preventDefault();

    // If the media frame already exists, reopen it.
    if ( items_frame ) {
        items_frame.open();
        return;
    }

    // Create the media frame.
    items_frame = wp.media.frames.items = wp.media({
        title: 'Add to Gallery',
        button: {
            text: 'Select'
        },
        library: {
                type: [ 'video', 'image' ]
        },
    });

    // Finally, open the modal.
    items_frame.open();

});

Use the above code and check the line number 18,19 and 20

I checked some other comments too for the different file type. Try the below list of mime types:

Extension MIME Type

.doc      application/msword
.dot      application/msword

.docx     application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx     application/vnd.openxmlformats-officedocument.wordprocessingml.template
.docm     application/vnd.ms-word.document.macroEnabled.12
.dotm     application/vnd.ms-word.template.macroEnabled.12

.xls      application/vnd.ms-excel
.xlt      application/vnd.ms-excel
.xla      application/vnd.ms-excel

.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx     application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xlsm     application/vnd.ms-excel.sheet.macroEnabled.12
.xltm     application/vnd.ms-excel.template.macroEnabled.12
.xlam     application/vnd.ms-excel.addin.macroEnabled.12
.xlsb     application/vnd.ms-excel.sheet.binary.macroEnabled.12

.ppt      application/vnd.ms-powerpoint
.pot      application/vnd.ms-powerpoint
.pps      application/vnd.ms-powerpoint
.ppa      application/vnd.ms-powerpoint

.pptx     application/vnd.openxmlformats-officedocument.presentationml.presentation
.potx     application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx     application/vnd.openxmlformats-officedocument.presentationml.slideshow
.ppam     application/vnd.ms-powerpoint.addin.macroEnabled.12
.pptm     application/vnd.ms-powerpoint.presentation.macroEnabled.12
.potm     application/vnd.ms-powerpoint.template.macroEnabled.12
.ppsm     application/vnd.ms-powerpoint.slideshow.macroEnabled.12

.mdb      application/vnd.ms-access

Answer 4

I am pretty much late to this answer and i was stuck but this how I was able to get it right after spending hours. Hopefully this will help anyone who is reading. Basically just modify the media picker's input attribute on the go.

items_frame.on('uploader:ready', function () {
    jQuery('.moxie-shim-html5 input[type="file"]')
        .attr({
            tabIndex: '-1',
            'multiple': false,
            'accept': 'application/pdf, application/epub+zip', // this where to add your mime type
            'aria-hidden': 'true'
        });
});