Media Library - Vextro Docs

The Media Library provides a unified interface for managing all uploaded media assets. It aggregates files from every upload-enabled collection into a single browsable view with filtering, search, drag-and-drop upload, and bulk actions.

Setup

Import the page component and mount it in your Astro routing:

---
import VextroMediaLibraryPage from "vextro/pages/VextroMediaLibraryPage.astro";
---

<VextroMediaLibraryPage
  convex={convex}
  api={api}
  basePath="/admin"
  config={config}
/>

Page props

Prop	Type	Required	Description
`convex`	`ConvexClient`	Yes	Convex client instance.
`api`	`AdminAPI`	Yes	Admin API reference from `createVextroAdminModule`.
`brandName`	`string`	No	Custom brand name displayed in the header. Defaults to `"Vextro"`.
`basePath`	`string`	No	URL base path for routing links.
`config`	`VextroConfig`	No	Vextro configuration object.

Features

A sidebar displays folders and media type counts. Click a folder or type to filter the grid view to matching assets.

Grid view

Media items display as a responsive grid with thumbnails. Items are sortable and support these sort options:

Sort	Description
`newest`	Most recently uploaded first (default).
`oldest`	Oldest uploads first.
`name-asc`	Alphabetical A-Z by filename.
`name-desc`	Alphabetical Z-A by filename.
`size-asc`	Smallest files first.
`size-desc`	Largest files first.

Filtering

Filter media using query parameters:

Parameter	Values	Description
`type`	`all`, `image`, `video`, `audio`, `document`	Filter by media type.
`collection`	Collection slug	Filter to a specific upload collection.
`folder`	Folder path	Filter to a specific folder.
`q`	Search string	Search by name, filename, alt text, or tags.

Upload

Drag and drop files onto the grid area or use the upload button. The page handles file uploads via POST with form-based intent dispatching.

Detail panel

Click any media item to open a detail panel showing metadata (filename, type, size, dimensions) with inline editing for alt text, tags, and other fields. Metadata changes are submitted through the page action and refresh the library's server-rendered data, so saved values remain current after closing or reloading the panel.

Bulk actions

Select multiple items to access bulk operations including delete and tag updates.

Upload collections required

The Media Library page only appears when at least one collection has upload functionality enabled. If no upload-enabled collections exist, the page displays an empty state.

Responsive layout

The page adapts to different screen sizes with distinct layouts for mobile, tablet, and desktop viewports. The sidebar collapses on smaller screens.