Media Library
Upload, organize, and manage workspace media assets
Media Library
The media library provides centralized management of all workspace images — hero backgrounds, blog post images, branding assets, and listing photos.
Overview
Media assets are stored in the workspace_media table with files in Supabase Storage. Each asset belongs to a workspace and can optionally be linked to a listing.
Accessing the Media Library
- Go to Dashboard → Media
- Browse, search, and filter your uploaded assets
- Upload new files via drag-and-drop or the upload button
Upload Specifications
| Setting | Value |
|---|---|
| Accepted formats | JPEG, PNG, WebP, HEIC |
| Maximum file size | 20 MB per file |
| Storage | Supabase Storage (workspace-media bucket) |
Media Categories
Organize uploads by intended use:
| Category | Description | Typical Usage |
|---|---|---|
hero | Hero section backgrounds | Homepage, page heroes |
listing | Listing-related photos | Supplemental listing images |
blog | Blog post images | Featured images, inline photos |
branding | Brand assets | Logos, headshots, team photos |
general | Uncategorized | Any other workspace images |
Categories can be set during upload or changed later.
Using the MediaPicker
The MediaPicker component appears throughout the dashboard wherever an image can be selected (hero settings, blog posts, branding). It provides:
- Browse — Grid of existing media assets with category filtering
- Upload — Drag-and-drop or click to upload new files
- Search — Filter by filename or address
- Select — Click to select an asset and insert its URL
Address-Based Search
When uploading media, you can associate it with a property address. This makes it easy to find listing-related photos later. The media library supports searching by address text.
Listing Association
Media assets can be linked to specific listings via the listing_id field. This enables:
- Finding all custom photos for a listing
- Deletion safety — The system warns before deleting media that is currently in use by a listing's hero image, blog post, or landing page
- Organizing photos by property
Storage Tracking
Monitor your workspace's storage usage:
- API:
GET /api/dashboard/media/storage - Returns total bytes used and file count
- Displayed in the media library header
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
/api/dashboard/media | GET | List media assets (with category filter, pagination) |
/api/dashboard/media | POST | Upload a new media asset (FormData) |
/api/dashboard/media/[id] | DELETE | Delete a media asset |
/api/dashboard/media/storage | GET | Get storage usage stats |
POST /api/dashboard/media
Upload via multipart/form-data:
| Field | Type | Required | Description |
|---|---|---|---|
file | File | Yes | The image file (max 20 MB) |
category | String | No | One of: hero, listing, blog, branding, general |
listing_id | UUID | No | Associate with a listing |
address | String | No | Property address for search |
GET /api/dashboard/media
| Parameter | Type | Description |
|---|---|---|
category | String | Filter by category |
listing_id | UUID | Filter by listing |
search | String | Search filename or address |
page | Number | Page number (default: 1) |
per_page | Number | Items per page (default: 24) |
Related Documentation
- Managing Photos — Listing-specific photo management
- Blog — Using media in blog posts
- Homepage — Setting hero images