Restrict file types in the uploader of a wp.media frame

Question

When creating a wp.media frame in JS, is it possible to specify allowed file types for the uploads tab?

wp.media({
    title: 'Pick a PDF',
    button: {
        text: 'Use this file...'
    },
    library: {
        type: 'application/pdf'
    },
    multiple: false,

    // Is there a similar option to this that works?
    uploader: {
        type: 'application/pdf'
    }
}

Note: I do not want to restrict all upload mime types through the upload_mimes hook. This should be only an indication to user, since the library already filters the files by mime type (the library.type option).

The documentation is kind of short-spoken on this topic at the moment.

Answer 1

Just found a solution. It's a bit tricky, but works.
As usually create media window, and save it to variable.

var pdfPicker = wp.media({
    title: 'Pick a PDF',
    button: {
        text: 'Use this file...'
    },
    ...
}

Then you need bind to event after input creation and specify required file extensions. Notice that I used once, to prevent infinite loop of input recreation.

pdfPicker.once('uploader:ready', function () {
    var uploader = pdfPicker.uploader.uploader.uploader; // Upload manager

    //Updating allowed extensions
    uploader.setOption('filters',
        {
            mime_types: [
                { extensions: "pdf" }
            ]
        }
    );

    //Trick to reinit field
    uploader.setOption('multi_selection', false);
});

If you want to specify more than one extension - separate it with comma.

{ extensions: "pdf,doc,docx" }

Pay attention that file types are hardcoded. You can view listing here:
wp-includes/js/plupload/moxie.js:1283

---

Update for WP Customizer WP_Customize_Media_Control and WP_Customize_Upload_Control.
First you need to get WP Customizer control that you defined in customize_register hook, after that bind to click/keydown event, and finally just use previously provided solution.

var yourControl = wp.customize.control('you_control_name'),
    yourContainer = yourControl.container;

yourContainer.one('click keydown', function () {
    if (yourControl.frame) {
        var filePicker = yourControl.frame;

        filePicker.once('uploader:ready', function () {
            var uploader = filePicker.uploader.uploader.uploader;

            uploader.setOption('filters',
                {
                    mime_types: [
                        { extensions: "doc,docx" }
                    ]
                }
            );
            uploader.setOption('multi_selection', false);
        });
    }
});

Drawback of this solution, that i don't sure about event execution order. And maybe there can be a point when yourControl.frame will be not defined. In this case i just added if check.
If anyone can clarify that aspect, please post a comment.

Answer 2

Great question! Have you ever found an answer to this? Or has anyone ever? Sadly the documentation is still as crappy as it was four years ago and googling for this topic still brings up your question as the only relevant result.

Interestingly, your idea of

uploader: {
    type: 'application/pdf'
}

seems to be recognized by the API since you can see that the wp.media instance outputs it as a prop when logged to the console. However, it has absolutely zero effect and the user can still select whatever file he wants in the uploader.

It might not be the cleanest solution, but, for anyone that stumbles across this age-old topic, here's how I know handle invalid file types: Within my_custom_uploader.on('select', () => { ... }) I check if the selected media file is of the same file type thats set under

library: {
    type: 'myfiletype'
}

and render an error message if thats not the case and prevent the file id from being set as the value of the corresponding input.

The final code implementation could look somewhat like this:

// Handle media selection in media uploader
my_custom_uploader.on( 'select', () => {
    // Get selected mediafile
    const sel_media = my_custom_uploader.state().get( 'selection' ).first().toJSON();

    // Check if selected mediafile is of wrong file type
    if( sel_media.mime !== 'application/pdf' ) {
        // Set error message
        const err_msg = 'Filetype ' + sel_media.mime + ' is not supported for menu item icons. Please select an SVG file.';

        // Create inline error element, set HTML classes and append error messsage
        const err_el = document.createElement('p');
        err_el.classList.add( 'my-inline-error', 'wrong-filetype' );
        err_el.innerHTML = err_msg;

        // Get upload button
        const upload_btn = document.getElementById( 'my_custom_upload_btn' );

        // Check if error message does not exist yet
        if( document.querySelector( '.my-inline-error.wrong-filetype' ) ) {
            // Insert error element after upload button
            upload_btn.after( err_el );
        }

        // Return to prevent further script execution
        return;
    }
    
    // Get mediafile ID input
    const mediafile_id_input = document.getElementById( 'my-mediafile-id-input' );
    
    // Set value of mediafile ID input to ID of selected mediafile
    mediafile_id_input = sel_media.id;
} );

As far as I can tell from my research, WordPress core handles things similarly in it's implementations of the media API. I still don't think it's pretty though.

Answer 3

The type in the library parameter would be "application" for pdfs.