Media browser

media
	ulid varchar(26) primary key
	root_id varchar(26) not null
	type enum('root', 'dir', 'file') not null
	path varchar(1024) not null
	parent_id varchar(26) null references media(ulid)
	file_uuid varchar(26) null references files(ulid)
	created_at datetime not null
	updated_at datetime not null

files
	ulid varchar(26) primary key
	name varchar(255) not null
	mime_type varchar(255) not null
	disk_path varchar(1024) not null
	size bigint unsigned not null
	public_url varchar(1024) null
	thumbnail_url varchar(1024) null
	meta json null
	created_at datetime not null
	updated_at datetime not null

unique index media_root_path_unique on media(root_id, path)
index media_parent_index on media(parent_id)
index media_file_index on media(file_uuid)

GET /api/media/roots/:rootId/folders?path=/Images

// Response
{
	folder: {
		ulid: 'media_images',
		type: 'dir',
		path: '/Images',
		parent_id: 'media_root_brand',
		file_uuid: null,
		name: 'Images',
	},
	data: [
		{
			ulid: 'media_hero',
			type: 'file',
			path: '/Images/hero-image.jpg',
			parent_id: 'media_images',
			file_uuid: 'file_hero',
			name: 'hero-image.jpg',
			file: {
				ulid: 'file_hero',
				name: 'hero-image.jpg',
				mimeType: 'image/jpeg',
				diskPath: 'brand/file_hero/hero-image.jpg',
				size: 842120,
				publicUrl: '/media/file_hero/hero-image.jpg',
				thumbnailUrl: '/media/file_hero/thumb.jpg',
				meta: { alt: 'Dashboard hero card', width: 1600, height: 900 },
			},
		},
	],
	breadcrumbs: [
		{ label: 'Root', path: '/', ulid: 'media_root_brand' },
		{ label: 'Images', path: '/Images', ulid: 'media_images' },
	],
	meta: {
		rootId: 'media_root_brand',
		path: '/Images',
		total: 1,
		requestedAt: '2026-07-01T10:00:00.000Z',
	},
}

import { defineMediaBrowserStore } from '@getdom/studio/vue';

export const useProjectMediaStore = defineMediaBrowserStore('project-media', {
	rootId: 'media_root_brand',
	baseUrl: '/api/media',
	filesBaseUrl: '/api/files',
	mode: 'grid',
});

// The store updates currentPath and derived breadcrumbs immediately.
// Cached children stay visible while the server refresh request runs.
await store.loadFolder('/Images/Campaign');

POST /api/media/folders
{
	rootId: 'media_root_brand',
	parentId: 'media_images',
	path: '/Images',
	name: 'Campaign',
	tempUlid: 'temp_folder_lkx',
}

PATCH /api/media/:ulid
{
	name: 'Brand hero.jpg'
}

PATCH /api/media/move
{
	ulids: ['media_hero', 'media_product'],
	targetParentId: 'media_campaign',
}

PATCH /api/files/:fileUuid/meta
{
	meta: {
		alt: 'Product interface shown on a laptop',
		publicUrl: '/media/file_product/product-shot.png',
	}
}

POST /api/media/uploads
{
	rootId: 'media_root_brand',
	parentId: 'media_images',
	path: '/Images',
	chunkSize: 5242880,
	files: [
		{
			tempUlid: 'temp_upload_8',
			name: 'homepage.png',
			relativePath: 'homepage.png',
			pathSegments: ['homepage.png'],
			size: 628120,
			mimeType: 'image/png',
		},
		{
			tempUlid: 'temp_upload_9',
			name: 'detail.png',
			relativePath: 'Campaign/detail.png',
			pathSegments: ['Campaign', 'detail.png'],
			size: 450120,
			mimeType: 'image/png',
		},
	],
}

// Progress event emitted by the uploader service
{
	overall: 64,
	files: [
		{ tempUlid: 'temp_upload_8', progress: 68 },
		{ tempUlid: 'temp_upload_9', progress: 61 },
	],
}

// Completion response
{
	data: [
		/* created media rows, using tempUlid when the server accepts it */
	],
	visible: [
		/* canonical children for the current folder after upload */
	],
	meta: {
		action: 'upload-batch',
		total: 2,
		requestedAt: '2026-07-01T10:01:00.000Z',
	},
}

// src/routes.js
{
	path: '/data/media-browser/:folderPath(.*)*',
	component: MediaBrowserPage,
	meta: routeMeta('/data/media-browser'),
}

// Inside a page that wraps DomMediaBrowser
function routePathForFolder(path) {
	if (path === '/') return '/data/media-browser';
	const encoded = path
		.split('/')
		.filter(Boolean)
		.map((segment) => encodeURIComponent(segment))
		.join('/');
	return `/data/media-browser/${encoded}`;
}

function pathFromRouteParam(folderPath) {
	const parts = Array.isArray(folderPath) ? folderPath : [folderPath].filter(Boolean);
	return parts.length ? `/${parts.map(decodeURIComponent).join('/')}` : '/';
}

<DomMediaBrowser
	:items="store.items"
	:item-components="{
		image: ImageMediaTile,
		pdf: PdfMediaTile,
		default: FileMediaTile,
	}"
	:inspector-components="{
		image: ImageMetadataInspector,
		default: FileMetadataInspector,
	}"
	:detail-components="{
		image: { component: ImageMediaDetail, mode: 'dialog' },
		pdf: { component: PdfMediaDetail, mode: 'inline' },
	}"
/>

<!-- Or replace the whole visible row. -->
<template #item="{ item, kind, selected, rename }">
	<MyMediaRow
		:item="item"
		:kind="kind"
		:selected="selected"
		@rename="rename"
	/>
</template>