Getting started
Library
Components
Integrations
Configurable schemas
The Media Library is built entirely using Schema-components which makes it incredibly flexible. This allows you to insert or modify components throughout the entire library.
A configurable schema represent an array of components that are visually related. For example, the "list files" or "file info" (sidebar) component.
Usage
In this example we will take the FileTopbarSchema as an example, which is the section containing the breadcrumbs and the Create folder action. Now, we would like to insert one more action:
FileTopbarSchema::configureUsing(function (FileTopbarSchema $configurableSchema) {
$components = $configurableSchema->getConfiguredComponents();
// Modify `$components`...
$configurableSchema->configuredComponents($components);
});
This gives the following structure of $components:
SectionFlexBreadcrumbsCreateFolderAction
Then, finally we will insert our custom action class:
/** @var Section $sectionComponent */
$sectionComponent = $components[0];
/** @var Flex $flexComponent */
$flexComponent = $sectionComponent->getChildComponents()[0];
[$breadcrumbsComponent, $createFolderAction] = $flexComponent->getChildComponents();
$configurableSchema->configuredComponents([
$sectionComponent
->schema([
$flexComponent
->schema([
$breadcrumbsComponent,
// Wrap the actions in a group, so that they stay together...
Group::make([
CustomAction::make(),
$createFolderAction,
]),
]),
]),
]);
For each configurable schema you can click through to the source of the plugin to verify the exact schema-structure that is returned. Sometimes the structure is quite nested and you need to dig a few levels deep to find the actual content components that you are interested in.
If you require assistance regarding a certain customisation, e-mail me at [email protected].
Available configurable schemas
| Schema | UI region |
|---|---|
| `ExplorePage\FileTopbarSchema` | The top bar with folder breadcrumbs, an optional driver switcher, the Create folder action, and an optional Upload action. |
| `ExplorePage\FileFilterSchema` | The toolbar row below the top bar — search input, filter dropdown, sorter dropdown, display-options toggle, and active-filter indicators. |
| `ExplorePage\ListFilesSchema` | The main file browser area — paginated files and folders, grouping, per-file actions, bulk selection with bulk actions, and the empty state. |
| `ExplorePage\FileInfoSchema` | The right-hand detail panel for the selected file — preview, metadata, Spatie Tags editor, custom edit fields, and file-info actions. |