fix(admin): render file field with media picker instead of text input

.changeset/shiny-seals-make.md

@@ -0,0 +1,8 @@
+---
+"@emdash-cms/admin": patch
+"emdash": patch
+---
+
+Fixes the `file` field type rendering as a plain text input in the content editor. Adds a `FileFieldRenderer` that opens the media picker (with mime filter disabled) so any file type can be attached. Also adds a `hideUrlInput` prop to `MediaPickerModal` so non-image pickers can hide the image-specific "Insert from URL" input.
+
+Aligns the Zod schema and generated TypeScript types for `image` and `file` fields with the shape the admin actually stores: `provider?`, `meta?` (for both), and `previewUrl?` (for image). Previously these fields were stripped on validation and missing from generated types, so site code could not reliably resolve local media URLs from `meta.storageKey`.

packages/admin/src/components/ContentEditor.tsx

@@ -17,6 +17,7 @@ import {
 	Eye,
 	Image as ImageIcon,
 	MagnifyingGlass,
+	Paperclip,
 	X,
 	Trash,
 	ArrowsInSimple,
@@ -37,8 +38,9 @@ import type {
 } from "../lib/api";
 import { getPreviewUrl, getDraftStatus } from "../lib/api";
 import { fromDatetimeLocalInputValue, toDatetimeLocalInputValue } from "../lib/datetime-local.js";
+import { formatFileSize, getFileIcon } from "../lib/media-utils";
 import { usePluginAdmins } from "../lib/plugin-context.js";
-import { contentUrl } from "../lib/url.js";
+import { contentUrl, isSafeUrl } from "../lib/url.js";
 import { cn, slugify } from "../lib/utils";
 import { ArrowPrev } from "./ArrowIcons.js";
 import { BlockKitFieldWidget } from "./BlockKitFieldWidget.js";
@@ -1342,6 +1344,24 @@ function FieldRenderer({
 			);
 		}
 
+		case "file": {
+			// value is either a FileFieldValue object or undefined.
+			// The file field type was unusable before this PR (rendered as a text input
+			// that produced raw strings nobody could meaningfully save), so there is no
+			// "legacy string" data to preserve here.
+			const fileValue =
+				value != null && typeof value === "object" ? (value as FileFieldValue) : undefined;
+			return (
+				<FileFieldRenderer
+					id={id}
+					label={label}
+					value={fileValue}
+					onChange={handleChange}
+					required={field.required}
+				/>
+			);
+		}
+
 		case "repeater": {
 			const validation = field.validation;
 			const subFields = (validation?.subFields ?? []) as Array<{
@@ -1666,6 +1686,168 @@ function ImageFieldRenderer({
 	);
 }
 
+/**
+ * File field value — matches the "file" shape validated by the Zod generator:
+ * { id, provider?, src?, filename?, mimeType?, size?, meta? }
+ */
+interface FileFieldValue {
+	id: string;
+	/** Provider ID (e.g., "local", "s3") */
+	provider?: string;
+	/** Direct URL for non-local media */
+	src?: string;
+	filename?: string;
+	mimeType?: string;
+	size?: number;
+	/** Provider-specific metadata */
+	meta?: Record<string, unknown>;
+}
+
+interface FileFieldRendererProps {
+	id?: string;
+	label: string;
+	value: FileFieldValue | undefined;
+	onChange: (value: FileFieldValue | null) => void;
+	required?: boolean;
+}
+
+/**
+ * File field with media picker
+ *
+ * Like ImageFieldRenderer but for arbitrary file types. Shows a mime-type-appropriate
+ * icon, filename, and size instead of an image preview.
+ */
+function FileFieldRenderer({ id, label, value, onChange, required }: FileFieldRendererProps) {
+	const { t } = useLingui();
+	const [pickerOpen, setPickerOpen] = React.useState(false);
+
+	// Normalize value to derive display info.
+	// For local files, prefer meta.storageKey; fall back to value.src when it's an
+	// internal media path; finally fall back to value.id so local files remain
+	// clickable even when metadata is sparse. For external providers, use value.src
+	// but only when it's an http(s) URL — a hostile provider plugin could otherwise
+	// return a data: or javascript: URL that gets rendered as a clickable link.
+	const normalized = React.useMemo(() => {
+		if (!value) return null;
+		const isLocal = !value.provider || value.provider === "local";
+		const storageKey =
+			typeof value.meta?.storageKey === "string" ? value.meta.storageKey : undefined;
+		const localSrc =
+			typeof value.src === "string" && value.src.startsWith("/_emdash/") ? value.src : undefined;
+		// Storage keys come from server-controlled paths today, but the Zod schema
+		// now lets clients write arbitrary `meta.storageKey` strings via the content
+		// API. Encode before interpolating so attacker-shaped values can't escape
+		// the path with `?` or `#`.
+		const localUrl = isLocal
+			? storageKey
+				? `/_emdash/api/media/file/${encodeURIComponent(storageKey)}`
+				: (localSrc ?? `/_emdash/api/media/file/${encodeURIComponent(value.id)}`)
+			: undefined;
+		const externalUrl = !isLocal && value.src && isSafeUrl(value.src) ? value.src : undefined;
+		return {
+			displayUrl: localUrl ?? externalUrl,
+			filename: value.filename || t`Untitled file`,
+			mimeType: value.mimeType || "",
+			size: value.size,
+		};
+	}, [value, t]);
+
+	const handleSelect = (item: MediaItem) => {
+		const isLocalProvider = !item.provider || item.provider === "local";
+		onChange({
+			id: item.id,
+			provider: item.provider || "local",
+			src: isLocalProvider ? undefined : item.url,
+			filename: item.filename,
+			mimeType: item.mimeType,
+			size: item.size,
+			meta: isLocalProvider ? { ...item.meta, storageKey: item.storageKey } : item.meta,
+		});
+	};
+
+	const handleRemove = () => {
+		onChange(null);
+	};
+
+	const hasMime = !!normalized?.mimeType;
+	const size = typeof normalized?.size === "number" ? normalized.size : undefined;
+	const hasSize = size !== undefined;
+
+	return (
+		<div id={id}>
+			<Label>{label}</Label>
+			{normalized ? (
+				<div className="mt-2 flex items-center gap-3 rounded-lg border p-3">
+					<span className="text-3xl" aria-hidden="true">
+						{getFileIcon(normalized.mimeType)}
+					</span>
+					<div className="flex-1 min-w-0">
+						{normalized.displayUrl ? (
+							<a
+								href={normalized.displayUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="text-sm font-medium truncate block hover:underline"
+							>
+								{normalized.filename}
+							</a>
+						) : (
+							<p className="text-sm font-medium truncate">{normalized.filename}</p>
+						)}
+						{(hasMime || hasSize) && (
+							<p className="text-xs text-kumo-subtle">
+								{hasMime ? normalized.mimeType : null}
+								{hasMime && hasSize ? " • " : null}
+								{hasSize ? formatFileSize(size) : null}
+							</p>
+						)}
+					</div>
+					<div className="flex gap-1">
+						<Button type="button" size="sm" variant="secondary" onClick={() => setPickerOpen(true)}>
+							{t`Change`}
+						</Button>
+						<Button
+							type="button"
+							shape="square"
+							variant="destructive"
+							className="h-8 w-8"
+							onClick={handleRemove}
+							aria-label={t`Remove ${label}`}
+						>
+							<X className="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			) : (
+				<Button
+					type="button"
+					variant="outline"
+					className="mt-2 w-full h-32 border-dashed"
+					onClick={() => setPickerOpen(true)}
+					aria-label={t`Select ${label}`}
+				>
+					<div className="flex flex-col items-center gap-2 text-kumo-subtle">
+						<Paperclip className="h-8 w-8" />
+						<span>{t`Select file`}</span>
+					</div>
+				</Button>
+			)}
+			<MediaPickerModal
+				open={pickerOpen}
+				onOpenChange={setPickerOpen}
+				onSelect={handleSelect}
+				mimeTypeFilter=""
+				hideUrlInput
+				mediaKind="file"
+				title={t`Select ${label}`}
+			/>
+			{required && !normalized && (
+				<p className="text-sm text-kumo-danger mt-1">{t`This field is required`}</p>
+			)}
+		</div>
+	);
+}
+
 /**
  * Author selector component for editors and above
  */

packages/admin/src/components/MediaPickerModal.tsx

@@ -9,7 +9,7 @@
 import { Button, Dialog, Input, Label, Loader } from "@cloudflare/kumo";
 import { plural } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react/macro";
-import { Upload, Image, Check, Globe, MagnifyingGlass } from "@phosphor-icons/react";
+import { Upload, Image, Check, Globe, MagnifyingGlass, Paperclip } from "@phosphor-icons/react";
 import { X } from "@phosphor-icons/react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
@@ -42,6 +42,18 @@ export interface MediaPickerModalProps {
 	/** Filter by mime type prefix, e.g. "image/" */
 	mimeTypeFilter?: string;
 	title?: string;
+	/**
+	 * Hide the "Insert from URL" input. Defaults to false.
+	 * The URL input probes image dimensions and is only meaningful for image pickers,
+	 * so non-image pickers (e.g. generic file pickers) should hide it.
+	 */
+	hideUrlInput?: boolean;
+	/**
+	 * What kind of media this picker is for. Drives user-facing copy
+	 * (default title, empty-state message, upload button label, empty-state icon).
+	 * Defaults to "image" — set to "file" for generic file pickers.
+	 */
+	mediaKind?: "image" | "file";
 }
 
 /**
@@ -66,9 +78,17 @@ export function MediaPickerModal({
 	onSelect,
 	mimeTypeFilter = "image/",
 	title: providedTitle,
+	hideUrlInput = false,
+	mediaKind = "image",
 }: MediaPickerModalProps) {
 	const { t } = useLingui();
-	const title = providedTitle ?? t`Select Image`;
+	const isFileKind = mediaKind === "file";
+	const title = providedTitle ?? (isFileKind ? t`Select File` : t`Select Image`);
+	const emptyStateUploadHint = isFileKind
+		? t`Upload a file to get started`
+		: t`Upload an image to get started`;
+	const emptyStateUploadCta = isFileKind ? t`Upload File` : t`Upload Image`;
+	const EmptyStateIcon = isFileKind ? Paperclip : Image;
 	const queryClient = useQueryClient();
 	const [selectedItem, setSelectedItem] = React.useState<SelectedMedia | null>(null);
 	const [activeProvider, setActiveProvider] = React.useState<string>("local");
@@ -362,41 +382,45 @@ export function MediaPickerModal({
 					/>
 				</div>
 
-				{/* URL Input */}
-				<div className="border-b pb-4">
-					<Label>{t`Insert from URL`}</Label>
-					<div className="flex gap-2 mt-1.5">
-						<div className="flex-1 relative">
-							<Globe className="absolute start-3 top-1/2 -translate-y-1/2 h-4 w-4 text-kumo-subtle" />
-							<Input
-								type="url"
-								placeholder="https://example.com/image.jpg"
-								aria-label={t`Image URL`}
-								value={imageUrl}
-								onChange={(e) => {
-									setImageUrl(e.target.value);
-									setUrlError(null);
-								}}
-								onKeyDown={handleUrlKeyDown}
-								className="ps-9"
-							/>
+				{/* URL Input (image pickers only — probes image dimensions) */}
+				{!hideUrlInput && (
+					<>
+						<div className="border-b pb-4">
+							<Label>{t`Insert from URL`}</Label>
+							<div className="flex gap-2 mt-1.5">
+								<div className="flex-1 relative">
+									<Globe className="absolute start-3 top-1/2 -translate-y-1/2 h-4 w-4 text-kumo-subtle" />
+									<Input
+										type="url"
+										placeholder="https://example.com/image.jpg"
+										aria-label={t`Image URL`}
+										value={imageUrl}
+										onChange={(e) => {
+											setImageUrl(e.target.value);
+											setUrlError(null);
+										}}
+										onKeyDown={handleUrlKeyDown}
+										className="ps-9"
+									/>
+								</div>
+								<Button onClick={handleUrlSubmit} disabled={!imageUrl.trim() || isProbing}>
+									{isProbing ? <Loader size="sm" /> : t`Insert`}
+								</Button>
+							</div>
+							{urlError && <p className="text-sm text-kumo-danger mt-1">{urlError}</p>}
 						</div>
-						<Button onClick={handleUrlSubmit} disabled={!imageUrl.trim() || isProbing}>
-							{isProbing ? <Loader size="sm" /> : t`Insert`}
-						</Button>
-					</div>
-					{urlError && <p className="text-sm text-kumo-danger mt-1">{urlError}</p>}
-				</div>
 
-				{/* Divider with "or" */}
-				<div className="relative py-2">
-					<div className="absolute inset-0 flex items-center">
-						<span className="w-full border-t" />
-					</div>
-					<div className="relative flex justify-center text-xs uppercase">
-						<span className="bg-kumo-base px-2 text-kumo-subtle">{t`or choose from library`}</span>
-					</div>
-				</div>
+						{/* Divider with "or" */}
+						<div className="relative py-2">
+							<div className="absolute inset-0 flex items-center">
+								<span className="w-full border-t" />
+							</div>
+							<div className="relative flex justify-center text-xs uppercase">
+								<span className="bg-kumo-base px-2 text-kumo-subtle">{t`or choose from library`}</span>
+							</div>
+						</div>
+					</>
+				)}
 
 				{/* Provider Tabs */}
 				{providerTabs.length > 1 && (
@@ -487,13 +511,13 @@ export function MediaPickerModal({
 						</div>
 					) : items.length === 0 ? (
 						<div className="flex flex-col items-center justify-center h-full text-center p-8">
-							<Image className="h-12 w-12 text-kumo-subtle mb-4" aria-hidden="true" />
+							<EmptyStateIcon className="h-12 w-12 text-kumo-subtle mb-4" aria-hidden="true" />
 							<h3 className="text-lg font-medium">{t`No media found`}</h3>
 							<p className="text-sm text-kumo-subtle mt-1">
 								{canSearch && searchQuery
 									? t`Try a different search term`
 									: canUpload
-										? t`Upload an image to get started`
+										? emptyStateUploadHint
 										: t`No media available from this provider`}
 							</p>
 							{canUpload && !searchQuery && (
@@ -502,7 +526,7 @@ export function MediaPickerModal({
 									icon={<Upload />}
 									onClick={() => fileInputRef.current?.click()}
 								>
-									{t`Upload Image`}
+									{emptyStateUploadCta}
 								</Button>
 							)}
 						</div>