7

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();

});

4 Answers 4

16

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' ]
    },
});
5
  • 1
    Thank you, sir! I have spent half an hour digging through various documentation but did not find any info regarding the wp.media arguments. I coud have just googled "wp.media images only" instead... Is there more info on them somewhere (because all docs I found were bleh)? Feb 18, 2018 at 11:20
  • Unfortunately I haven't found any official documentation/information regarding this.
    – user433351
    Feb 19, 2018 at 14:16
  • what about audio? Jun 30, 2018 at 12:45
  • 1
    What if I wan to attach only PDF or any other specific file extension?
    – Hasan Baig
    Aug 7, 2018 at 18:19
  • 1
    ok i did it by using "application/pdf"
    – Hasan Baig
    Aug 7, 2018 at 19:49
1

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.

1
1
$( '#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
0

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'
        });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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