Add a custom taxonomy dropdown filter to the WordPress Media Library

collection-filter.js

(function(){
	/**
	 * Create a new MediaLibraryTaxonomyFilter we later will instantiate
	 */
	var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
		id: 'media-attachment-taxonomy-filter',

		createFilters: function() {
			var filters = {};
			// Formats the 'terms' we've included via wp_localize_script()
			_.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
				filters[ index ] = {
					text: value.name,
					props: {
						// Change this: key needs to be the WP_Query var for the taxonomy
						collection: value.slug,
					}
				};
			});
			filters.all = {
				// Change this: use whatever default label you'd like
				text:  'All collections',
				props: {
					// Change this: key needs to be the WP_Query var for the taxonomy
					collection: ''
				},
				priority: 10
			};
			this.filters = filters;
		}
	});
	/**
	 * Extend and override wp.media.view.AttachmentsBrowser to include our new filter
	 */
	var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
	wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
		createToolbar: function() {
			// Make sure to load the original toolbar
			AttachmentsBrowser.prototype.createToolbar.call( this );
			this.toolbar.set( 'MediaLibraryTaxonomyFilter', new MediaLibraryTaxonomyFilter({
				controller: this.controller,
				model:      this.collection.props,
				priority: -75
			}).render() );
		}
	});
})()

enqueue.php

<?php

add_action( 'wp_enqueue_media', function() {
	wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() . '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
	// Load 'terms' into a JavaScript variable that collection-filter.js has access to
	wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', array(
		'terms'     => get_terms( 'collection', array( 'hide_empty' => false ) ),
	) );
	// Overrides code styling to accommodate for a third dropdown filter
	add_action( 'admin_footer', function(){
		?>
		<style>
		.media-modal-content .media-frame select.attachment-filters {
			max-width: -webkit-calc(33% - 12px);
			max-width: calc(33% - 12px);
		}
		</style>
		<?php
	});
});

When I select an option, the contents by category are not updated

`
var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
id: 'media-attachment-taxonomy-filter',

	createFilters: function() {
		var filters = {};
		// Formats the 'terms' we've included via wp_localize_script()
		_.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
			filters[ index ] = {
				text: value.name,
				props: {
					// Change this: key needs to be the WP_Query var for the taxonomy
					collection: 'category',
				}
			};
		});
		filters.all = {
			// Change this: use whatever default label you'd like
			text:  'Todas las categorías',
			props: {
				// Change this: key needs to be the WP_Query var for the taxonomy
				collection: 'category'
			},
			priority: 10
		};
		this.filters = filters;
	}
});

`

Just a note... I could not get it to work at all using value.slug on line 16. I had to change it to value.term_id. After that, worked perfectly.

Thanks for this. It works great. Is there anything that can be easily and quickly done in the code to have the select box appear in list view too?