Browser

media_directories_browser is the editor experience layer. It ships a Vue.js media browser, an admin landing page, a field widget that opens the same browser, and a CKEditor 5 integration that hijacks the Insert media button so it opens the directories browser instead of core's plain media library. The Vue.js frontend talks to its own controller endpoints under /api/media-directories-browser/* — no JSON:API module needed.

Install

drush en media_directories_browser

Dependencies: media_directories, core media, media_library, ckeditor5.

Configuration

All browser-specific settings live at /admin/config/media/media_directories/browser. They're grouped into five sections.

Display & behaviour

• Enable preview drawer — right-hand panel with a larger preview and metadata, opened by clicking the info button on a media card. Applies to the standalone browser page only — modals are controlled separately below.
• Also show the preview drawer in modals (visible when the preview drawer is on) — off by default. Field widget and CKEditor modals hide the preview drawer so it doesn't fight with the modal chrome and selection drawer. Turn on if your editors want the extra metadata while picking.
• Enable selection drawer — left-hand panel inside field widget modals that lists every item picked during the session, including ones from other folders. Helps editors track multi-item selections across directories.
• Pre-load existing field items into the drawer (visible when the selection drawer is on) — when on, the drawer starts pre-populated with the field's current items and confirming the modal replaces the field value. When off (default) the drawer starts empty and confirming adds to the field's existing items.
• Show directory file counts — adds a badge to each folder showing how many media items it contains. Heavier on very large trees, very useful on smaller ones.
• Page size (10–200, default 100) — how many items the browser fetches per scroll page.
• Directory sort mode — Alphabetical sorts by name and disables manual reordering. Weight sorts by taxonomy term weight and enables drag-and-drop reordering of sibling folders.
• Media list date format and Details drawer date format — pick any non-locked Drupal date format. Add more under Configuration → Regional and language → Date and time formats.

Saved preferences

These toggles persist editor state in the browser's local storage so a returning editor lands "where they left off". Turn them all off if you'd rather have a clean slate every session.

• Remember sort selection — keeps the column/sort order.
• Remember last opened directory — re-opens the same folder.
• Remember sidebar state — keeps the sidebar collapsed or expanded.
• Remember view mode — keeps grid vs. list.
• Expand all directories by default — every folder is open on load. Best for small trees.
  • With this off, Remember expanded directories appears: it persists which folders the editor has manually expanded.

Uploads

• Enable bulk actions — turns on per-field bulk autofill controls in the upload and edit modals (e.g. "set this alt text on every selected item"). Off if you'd rather force editors to fill each item individually.
  • When on, Bulk action fields lets you pick which fields appear in the bulk form, per media type.
• Enable combined upload — replaces the per-bundle upload fields with a single drop zone. Files are routed to the right media type automatically based on their extension.
  • Media types for combined upload — pick which file/image-based bundles participate. Bundles whose source field isn't file or image are filtered out of the list.

Translations

Only meaningful when core's content_translation module is installed. Without it, the form disables the translation controls.

• Enable translations — turns on the per-language tab strip in the upload and edit modals.
• Media types with translations — which bundles get the tab strip. Bundles with no translatable fields are skipped automatically.

For AI-assisted translation see the AI submodule page.

CKEditor integration

• Show file picker in link form (default on) — adds a Select a file button to CKEditor 5's link balloon, so editors can pick a file from the media browser instead of pasting a URL. Turn off to keep file links out of the browser entirely.

Additional setup

Configuration alone is not quite enough — three Drupal-level tweaks make the browser actually do its job.

1. Enable the media filters on your text format

Without Embed media and Display embedded entities, embedded media will render as raw markup. Open the text format you want to embed media in (e.g. /admin/config/content/formats/manage/full_html) and:

1. Tick Embed media under Enabled filters.
2. Tick Display embedded entities (Drupal core enables it together with Embed media on most setups).
3. In the Filter processing order section, drag Embed media above filters that process its output, and keep alignment/caption filters in their default positions.

2. Make sure the "Insert media" button is in the toolbar

media_directories_browser doesn't add a new toolbar button — instead it overrides core's drupalMedia button so that clicking it opens the directories browser. As long as the Insert media button is in the CKEditor 5 toolbar, the directories browser will take over.

If you don't see it, drag Insert media from the Available buttons pool into the Active toolbar on the same page.

3. Swap the field widget on media reference fields

By default media reference fields use core's Media library widget. To open the directories browser from the field instead, change the widget to Media Directories Browser Widget on the bundle's Manage form display page (/admin/structure/types/manage/<bundle>/form-display).

Permissions

The browser ships a dedicated permission, Access media directories browser, on top of the standard taxonomy and media permissions. Grant it to any role that should be able to open the browser, then layer the usual administer taxonomy / media edit-delete permissions on top to control what they can change.

Verifying the install

• /admin/content/media-browser opens the Vue.js browser.
• A CKEditor 5 instance using a text format with Embed media shows the directories browser when you click the Insert media button.
• Media reference fields whose widget is Media Directories Browser Widget now open the browser in a modal.