Add taxonomy filter for media library

injected-data.php

<?php

namespace utkarsh;

add_action( 'wp_enqueue_media', __NAMESPACE__ . '\\media_filter' );


/**
 * Add media filter script.
 */
function media_filter() {
	wp_enqueue_script( 'media-library-taxonomy-filter', plugin_dir_url( __FILE__ ) . '/assets/js/media-filter.js', [
		'media-editor',
		'media-views',
	] );
	$date_range = get_attachment_date_range();
	// Load 'terms' into a JavaScript variable that collection-filter.js has access to.
	wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', [
		'filter' => [
			'country'   => [
				'data'  => get_terms( 'country', [ 'hide_empty' => false ] ),
				'label' => esc_html__( 'Select Country', 'utkarsh' ),
			],
			'credit'    => [
				'data'  => get_terms( 'credit', [ 'hide_empty' => false ] ),
				'label' => esc_html__( 'Select Credit', 'utkarsh' ),
			],
		],
	] );
	// Overrides code styling to accommodate for a third dropdown filter.
	add_action( 'admin_footer', function () {
		?>
		<style>
			.media-modal .attachments-browser .media-toolbar-secondary {
				display: flex;
			}

			.media-modal-content .media-frame .attachments-browser select.attachment-filters {
				max-width: -webkit-calc(20% - 5px);
				max-width: calc(20% - 5px);
				margin-right: 5px;
			}

			.media-frame-content .attachments-browser .media-toolbar-secondary {
				max-width: 80%;
			}

			.media-frame-tab-panel .media-toolbar-secondary .spinner {
				margin: auto 0;
			}

			.media-modal .attachments-browser .spinner {
				padding: 10px;
				margin: 38px 0 0 0;
			}

			@media only screen and (min-width: 1401px) {
				.attachments-browser .media-toolbar-primary {
					/** Prevent breaking line */
					max-width: 20%;
				}
			}
		</style>
		<?php
	} );
}

media-library-filter.js

/* global MediaLibraryTaxonomyFilterData, _ */
( function () {
	const filter = {
		initialize: function () {
			this.setupFilter();
		},
		createFilter: function ( item, slug ) {
			return wp.media.view.AttachmentFilters.extend( {
				id: 'media-attachment-taxonomy-filter-' + slug,

				createFilters: function () {
					let filters = {};
					// Formats the 'terms' we've included via wp_localize_script().
					_.each( item.data || {}, function ( value, index ) {
						filters[index] = {
							text: value.name,
							props: {
								// Key needs to be the WP_Query var for the taxonomy.
								[slug]: value.slug
							}
						};
					} );
					filters.all = {
						text: item.label,
						props: {
							// Key needs to be the WP_Query var for the taxonomy.
							[slug]: ''
						},
						priority: 10
					};
					this.filters = filters;
				}
			} );
		},
		setupFilter: function () {
			/**
			 * Create a new instance of array we later will instantiate
			 */
			const filterList = {};
			for ( const slug in MediaLibraryTaxonomyFilterData.filter ) {
				const key = slug.charAt( 0 ).toUpperCase() + slug.slice( 1 );
				filterList[`MediaLibraryFilter${key}`] = this.createFilter( MediaLibraryTaxonomyFilterData.filter[slug], slug );
			}
			/**
			 * Extend and override wp.media.view.AttachmentsBrowser to include our new filter
			 */
			let 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 );
					// Remove unused filters to make space for our filters.
					this.toolbar.unset( 'dateFilterLabel' );
					this.toolbar.unset( 'filtersLabel' );
					this.toolbar.unset( 'dateFilter' );
					// Setup our filters from array.
					for ( const key in filterList ) {
						this.toolbar.set( key, new filterList[key]( {
							controller: this.controller,
							model: this.collection.props,
							priority: -75
						} ).render() );
					}
				}
			} );
		}
	};

	filter.initialize();
} )();

Hello Patel Utkarsh, I tried the code and it's great. Just an observation, if you change the wp gallery to list mode the filter disappears. How can I fix that?

Edit:
And another detail, if the taxonomy is hierarchical, it would be nice to see the levels in the filter selector.