{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "file-upload", "title": "文件上传", "description": "多文件选择与证件槽位，支持拖放、拍照、格式大小校验与受控上传状态，组件不发送请求。", "dependencies": [ "lucide-react", "@base-ui/react" ], "registryDependencies": [ "attachment", "button" ], "files": [ { "path": "src/registry/ui/file-upload/file-upload.tsx", "content": "\"use client\"\nimport * as React from \"react\"\nimport { RotateCw, X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Attachment,\n AttachmentGroup,\n AttachmentMedia,\n AttachmentContent,\n AttachmentTitle,\n AttachmentDescription,\n AttachmentActions,\n AttachmentAction,\n} from \"@/components/ui/attachment\"\nimport { useControllableState } from \"@/hooks/use-controllable-state\"\nimport { FileUploadPreview } from \"./file-upload-parts\"\nimport type { FileUploadProps } from \"./types\"\nimport { useFileSelection, useFileUploadReset } from \"./use-file-selection\"\nimport { describeAccept, formatFileSize, interpolate } from \"./utils\"\n\nfunction FileUpload({\n value: prop,\n defaultValue = [],\n onValueChange,\n accept,\n maxSize = Infinity,\n maxFiles = Infinity,\n multiple = true,\n replace,\n capture = \"environment\",\n disabled,\n error,\n labels: overrides,\n onReject,\n onRetry,\n className,\n \"aria-describedby\": describedBy,\n ...props\n}: FileUploadProps) {\n const [items, setItems] = useControllableState({\n prop,\n defaultProp: defaultValue,\n onChange: onValueChange,\n })\n const selection = useFileSelection({\n accept,\n maxSize,\n maxFiles,\n multiple,\n replace,\n labels: overrides,\n onReject,\n })\n const { labels, input, camera, message } = selection\n const [dragging, setDragging] = React.useState(false)\n const depth = React.useRef(0)\n useFileUploadReset(input, () => {\n if (prop === undefined) setItems(defaultValue)\n selection.clear()\n })\n const errorId = React.useId()\n const hintId = React.useId()\n // 被拒文件只在下方出一行说明，不把整个控件标成出错；出错态只跟随外部 error\n const invalid = Boolean(error || props[\"aria-invalid\"])\n function add(files: File[]) {\n if (disabled) return\n const next = selection.select(files, items.length)\n if (next.length) setItems(selection.replacing ? next : [...items, ...next])\n }\n function change(event: React.ChangeEvent) {\n add(Array.from(event.target.files ?? []))\n event.target.value = \"\"\n }\n const canCapture =\n capture !== false &&\n (!accept ||\n accept\n .split(\",\")\n .some((v) => /image\\/|\\.(jpe?g|png|webp|heic|heif|avif)/i.test(v)))\n return (\n \n \n \n {/* 拖放是指针增强操作，键盘与读屏用户通过区域内的原生「选择文件」按钮选择文件 */}\n {\n event.preventDefault()\n if (!disabled) {\n depth.current++\n setDragging(true)\n }\n }}\n onDragOver={(event) => event.preventDefault()}\n onDragLeave={() => {\n depth.current--\n if (depth.current <= 0) setDragging(false)\n }}\n onDrop={(event) => {\n event.preventDefault()\n depth.current = 0\n setDragging(false)\n add(Array.from(event.dataTransfer.files))\n }}\n >\n
\n {labels.drop}\n input.current?.click()}\n >\n {labels.choose}\n \n
\n
\n {canCapture && (\n camera.current?.click()}\n >\n {labels.camera}\n \n )}\n input.current?.click()}\n >\n {labels.album}\n \n
\n

\n {interpolate(labels.hint, {\n accept: accept ? describeAccept(accept) : labels.any,\n size: Number.isFinite(maxSize)\n ? formatFileSize(maxSize)\n : labels.unlimited,\n })}\n

\n \n {items.length > 0 && (\n \n {items.map((item) => (\n \n \n \n \n \n \n {item.file.name}\n \n \n {formatFileSize(item.file.size)}\n \n {item.status === \"uploading\" && item.progress !== undefined && (\n \n \n \n )}\n {item.error && (\n

{item.error}

\n )}\n \n \n \n {labels[item.status ?? \"pending\"]}\n {item.status === \"uploading\" && item.progress !== undefined\n ? ` ${Math.round(Math.max(0, Math.min(100, item.progress)))}%`\n : \"\"}\n \n {item.status === \"error\" && onRetry && (\n onRetry(item)}\n >\n \n \n )}\n {\n setItems(items.filter((v) => v.id !== item.id))\n selection.clear()\n }}\n >\n \n \n \n \n ))}\n \n )}\n \n {error || message}\n \n \n )\n}\nexport { FileUpload }\nexport { FileUploadSlot } from \"./file-upload-slot\"\nexport {\n IdCardFrontIllustration,\n IdCardBackIllustration,\n} from \"./file-upload-parts\"\nexport { appendFiles } from \"./utils\"\nexport type {\n FileUploadItem,\n FileUploadProps,\n FileUploadSlotProps,\n FileUploadRejection,\n} from \"./types\"\nexport type { FileUploadLabels } from \"./config\"\n", "type": "registry:ui", "target": "@ui/file-upload/file-upload.tsx" }, { "path": "src/registry/ui/file-upload/config.ts", "content": "const DEFAULT_LABELS = {\n cameraAlign: \"将身份证{label}放入框内，对齐四角\",\n cameraLight: \"保持光线充足、避免反光\",\n cameraConfirm: \"确认照片清晰完整\",\n cameraCancel: \"取消\",\n cameraShoot: \"拍摄\",\n cameraUse: \"使用这张\",\n cameraFallback: \"无法打开相机，已改用系统相机\",\n uploaded: \"已上传\",\n dropzone: \"文件上传\",\n drop: \"把文件拖到这里，或\",\n choose: \"选择文件\",\n camera: \"拍照\",\n album: \"从相册选择\",\n pending: \"待提交\",\n uploading: \"上传中\",\n error: \"上传失败\",\n done: \"已完成\",\n remove: \"删除 {name}\",\n retry: \"重试 {name}\",\n retryShort: \"重试\",\n replace: \"重拍\",\n delete: \"删除\",\n upload: \"上传{label}\",\n any: \"任意格式\",\n hint: \"{accept} · 单个不超过 {size}\",\n unlimited: \"不限大小\",\n typeError: \"「{name}」格式不支持，请选择{accept}\",\n sizeError: \"「{name}」超过 {size}\",\n countError: \"最多可添加 {count} 个文件，超出的未添加\",\n}\ntype FileUploadLabels = typeof DEFAULT_LABELS\nexport { DEFAULT_LABELS }\nexport type { FileUploadLabels }\n", "type": "registry:ui", "target": "@ui/file-upload/config.ts" }, { "path": "src/registry/ui/file-upload/file-upload-parts.tsx", "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction FileUploadPreview({\n file,\n className,\n}: {\n file: File\n className?: string\n}) {\n const image = React.useRef(null)\n const [failed, setFailed] = React.useState(null)\n React.useEffect(() => {\n if (!file.type.startsWith(\"image/\") || !image.current) return\n const url = URL.createObjectURL(file)\n image.current.src = url\n return () => URL.revokeObjectURL(url)\n }, [file])\n return (\n \n {file.type.startsWith(\"image/\") && failed !== file ? (\n // objectURL 在 effect 中赋给原生图片，避免渲染期分配资源。\n // eslint-disable-next-line @next/next/no-img-element\n setFailed(file)}\n />\n ) : (\n \n {file.name.split(\".\").pop()?.slice(0, 6)}\n \n )}\n \n )\n}\nfunction IdCardFrontIllustration(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n \n \n )\n}\nfunction IdCardBackIllustration(props: React.ComponentProps<\"svg\">) {\n return (\n \n \n \n \n \n \n )\n}\nexport { FileUploadPreview, IdCardFrontIllustration, IdCardBackIllustration }\n", "type": "registry:ui", "target": "@ui/file-upload/file-upload-parts.tsx" }, { "path": "src/registry/ui/file-upload/file-upload-slot.tsx", "content": "\"use client\"\nimport { Check } from \"lucide-react\"\nimport { FileUploadCamera } from \"./file-upload-camera\"\nimport * as React from \"react\"\nimport { RotateCw } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { useControllableState } from \"@/hooks/use-controllable-state\"\nimport { FileUploadPreview, IdCardFrontIllustration } from \"./file-upload-parts\"\nimport { useFileSelection, useFileUploadReset } from \"./use-file-selection\"\nimport { interpolate } from \"./utils\"\nimport type { FileUploadSlotProps } from \"./types\"\nfunction FileUploadSlot({\n label,\n viewfinder = \"id-card\",\n onRetry,\n placeholder,\n value: prop,\n defaultValue = null,\n onValueChange,\n accept = \"image/*\",\n maxSize = Infinity,\n capture = \"environment\",\n error,\n disabled,\n labels: overrides,\n onReject,\n className,\n ...props\n}: FileUploadSlotProps) {\n const [item, setItem] = useControllableState({\n prop,\n defaultProp: defaultValue,\n onChange: onValueChange,\n })\n const { input, labels, message, clear, select } = useFileSelection({\n accept,\n maxSize,\n multiple: false,\n labels: overrides,\n onReject,\n })\n useFileUploadReset(input, () => {\n if (prop === undefined) setItem(defaultValue)\n clear()\n })\n const [cameraOpen, setCameraOpen] = React.useState(false)\n const [cameraError, setCameraError] = React.useState(\"\")\n const album = React.useRef(null)\n const busy = disabled || item?.status === \"uploading\"\n function choose() {\n setCameraError(\"\")\n if (\n viewfinder &&\n capture &&\n matchMedia(\"(pointer: coarse)\").matches &&\n typeof navigator.mediaDevices?.getUserMedia === \"function\" &&\n window.isSecureContext\n )\n setCameraOpen(true)\n else input.current?.click()\n }\n function receive(file: File) {\n setCameraError(\"\")\n const next = select([file], 0)\n if (next[0]) setItem(next[0])\n }\n const errorId = React.useId()\n // 被拒文件只在下方说明；外部错误或上传失败会把槽位标红。\n const invalid = Boolean(\n error || item?.status === \"error\" || props[\"aria-invalid\"],\n )\n return (\n \n {cameraOpen && (\n setCameraOpen(false)}\n onSelect={(file) => {\n receive(file)\n setCameraOpen(false)\n }}\n onAlbum={() => {\n setCameraOpen(false)\n album.current?.click()\n }}\n onError={() => {\n setCameraOpen(false)\n setCameraError(labels.cameraFallback)\n input.current?.click()\n }}\n />\n )}\n {\n if (event.target.files?.[0]) receive(event.target.files[0])\n event.target.value = \"\"\n }}\n />\n

{label}

\n {\n setCameraError(\"\")\n const next = select(Array.from(event.target.files ?? []), 0)\n if (next[0]) setItem(next[0])\n event.target.value = \"\"\n }}\n />\n \n {item ? (\n <>\n \n {item.status === \"done\" && (\n \n \n {labels.uploaded}\n \n )}\n {item.status === \"uploading\" && (\n \n \n {Math.round(item.progress ?? 0)}%\n \n
\n \n
\n \n )}\n {/* 上传中不给操作，避免在请求途中被替换或删除 */}\n {item.status !== \"uploading\" && (\n
\n {item.status === \"error\" && onRetry ? (\n onRetry(item)}\n >\n \n {labels.retryShort}\n \n ) : (\n \n {labels.replace}\n \n )}\n {\n setItem(null)\n clear()\n }}\n >\n {labels.delete}\n \n
\n )}\n \n ) : (\n \n {placeholder ?? (\n \n )}\n {interpolate(labels.upload, { label })}\n \n )}\n \n \n {error || item?.error || cameraError || message}\n \n \n )\n}\nexport { FileUploadSlot }\n", "type": "registry:ui", "target": "@ui/file-upload/file-upload-slot.tsx" }, { "path": "src/registry/ui/file-upload/types.ts", "content": "import type * as React from \"react\"\nimport type { FileUploadLabels } from \"./config\"\ntype FileUploadItem = {\n id: string\n file: File\n status?: \"pending\" | \"uploading\" | \"error\" | \"done\"\n progress?: number\n error?: string\n}\ntype FileUploadRejection = { file: File; reason: \"type\" | \"size\" | \"count\" }\ntype FileUploadCommonProps = Omit<\n React.ComponentProps<\"div\">,\n \"defaultValue\" | \"onChange\"\n> & {\n /** MIME 或扩展名列表，逗号分隔。@default undefined */\n accept?: string\n /** 单文件大小上限，字节。@default Infinity */\n maxSize?: number\n /** 手机拍照方向；false 隐藏拍照。@default \"environment\" */\n capture?: \"user\" | \"environment\" | false\n /** 整体错误提示。 */\n error?: React.ReactNode\n /** @default false */\n disabled?: boolean\n labels?: Partial\n onReject?: (rejections: FileUploadRejection[]) => void\n}\ntype FileUploadProps = FileUploadCommonProps & {\n value?: FileUploadItem[]\n /** @default [] */\n defaultValue?: FileUploadItem[]\n onValueChange?: (value: FileUploadItem[]) => void\n /** 总文件数上限。@default Infinity */\n maxFiles?: number\n /** @default true */\n multiple?: boolean\n /**\n * 单文件模式下，新文件通过校验后直接替换旧文件；多文件模式忽略\n * @default 单文件模式（`multiple={false}` 或 `maxFiles={1}`）时为 true\n */\n replace?: boolean\n /** 传入后，上传失败的条目右侧出现「重试」按钮；重新上传由使用方完成 */\n onRetry?: (item: FileUploadItem) => void\n}\ntype FileUploadSlotProps = FileUploadCommonProps & {\n /** 触屏安全上下文中启用证件取景；false 始终走原生输入。@default \"id-card\" */\n viewfinder?: \"id-card\" | false\n /** 点击失败槽位的重试按钮，由使用方更新上传状态。 */\n onRetry?: (item: FileUploadItem) => void\n label: string\n placeholder?: React.ReactNode\n value?: FileUploadItem | null\n /** @default null */\n defaultValue?: FileUploadItem | null\n onValueChange?: (value: FileUploadItem | null) => void\n}\nexport type {\n FileUploadItem,\n FileUploadRejection,\n FileUploadProps,\n FileUploadSlotProps,\n}\n", "type": "registry:ui", "target": "@ui/file-upload/types.ts" }, { "path": "src/registry/ui/file-upload/use-file-selection.ts", "content": "\"use client\"\nimport * as React from \"react\"\nimport { DEFAULT_LABELS } from \"./config\"\nimport type { FileUploadProps } from \"./types\"\nimport {\n describeAccept,\n formatFileSize,\n interpolate,\n validateFiles,\n} from \"./utils\"\nfunction useFileSelection({\n accept,\n maxSize = Infinity,\n maxFiles = Infinity,\n multiple = true,\n replace = !multiple || maxFiles === 1,\n labels: overrides,\n onReject,\n}: FileUploadProps) {\n const replacing = replace && (!multiple || maxFiles === 1)\n const labels = { ...DEFAULT_LABELS, ...overrides }\n const [message, setMessage] = React.useState(\"\")\n const input = React.useRef(null)\n const camera = React.useRef(null)\n function select(files: File[], count: number) {\n const result = validateFiles(\n files,\n accept,\n maxSize,\n Math.max(0, Math.min(maxFiles, multiple ? Infinity : 1) - (replacing ? 0 : count)),\n )\n setMessage(\n result.rejected\n .map(({ file, reason }) =>\n interpolate(\n reason === \"type\"\n ? labels.typeError\n : reason === \"size\"\n ? labels.sizeError\n : labels.countError,\n {\n name: file.name,\n accept: accept ? describeAccept(accept) : labels.any,\n size: formatFileSize(maxSize),\n count: multiple ? maxFiles : 1,\n },\n ),\n )\n .filter((v, i, all) => all.indexOf(v) === i)\n .join(\"；\"),\n )\n if (result.rejected.length) onReject?.(result.rejected)\n return result.accepted\n }\n return { replacing, labels, message, clear: () => setMessage(\"\"), input, camera, select }\n}\nfunction useFileUploadReset(\n input: React.RefObject,\n onReset: () => void,\n) {\n const callback = React.useEffectEvent(onReset)\n React.useEffect(() => {\n const form = input.current?.form\n function reset(event: Event) {\n queueMicrotask(() => {\n if (!event.defaultPrevented) callback()\n })\n }\n form?.addEventListener(\"reset\", reset)\n return () => form?.removeEventListener(\"reset\", reset)\n }, [input])\n}\nexport { useFileSelection, useFileUploadReset }\n", "type": "registry:ui", "target": "@ui/file-upload/use-file-selection.ts" }, { "path": "src/registry/ui/file-upload/utils.ts", "content": "import type { FileUploadItem, FileUploadRejection } from \"./types\"\nfunction formatFileSize(size: number) {\n const unit = size >= 1048576 ? \"MB\" : size >= 1024 ? \"KB\" : \"B\"\n return `${new Intl.NumberFormat(\"zh-CN\", { maximumFractionDigits: 1 }).format(size / (unit === \"MB\" ? 1048576 : unit === \"KB\" ? 1024 : 1))} ${unit}`\n}\nfunction acceptsFile(file: File, accept?: string) {\n return (\n !accept?.trim() ||\n accept.split(\",\").some((part) => {\n const rule = part.trim().toLowerCase()\n if (!rule) return false\n if (rule.startsWith(\".\")) return file.name.toLowerCase().endsWith(rule)\n return rule.endsWith(\"/*\")\n ? file.type.toLowerCase().startsWith(rule.slice(0, -1))\n : file.type.toLowerCase() === rule\n })\n )\n}\nfunction validateFiles(\n files: File[],\n accept: string | undefined,\n maxSize: number,\n available: number,\n) {\n const accepted: FileUploadItem[] = []\n const rejected: FileUploadRejection[] = []\n for (const file of files) {\n const reason = !acceptsFile(file, accept)\n ? \"type\"\n : file.size > maxSize\n ? \"size\"\n : accepted.length >= available\n ? \"count\"\n : null\n if (reason) rejected.push({ file, reason })\n else accepted.push({ id: createId(), file, status: \"pending\" })\n }\n return { accepted, rejected }\n}\nlet seed = 0\n/** 局域网 http 页面（非安全上下文）没有 crypto.randomUUID，用自增序号兜底 */\nfunction createId() {\n return typeof crypto !== \"undefined\" && \"randomUUID\" in crypto\n ? crypto.randomUUID()\n : `file-${Date.now().toString(36)}-${++seed}`\n}\n\nconst MIME_NAMES: Record = {\n \"image/*\": \"图片\",\n \"video/*\": \"视频\",\n \"audio/*\": \"音频\",\n \"application/pdf\": \"PDF\",\n}\n\n/** 把 accept 转成给人看的格式说明：`image/*,.pdf` → 「图片、PDF」 */\nfunction describeAccept(accept: string) {\n const names = accept\n .split(\",\")\n .map((part) => part.trim().toLowerCase())\n .filter(Boolean)\n .map(\n (rule) =>\n MIME_NAMES[rule] ??\n (rule.startsWith(\".\")\n ? rule.slice(1).toUpperCase()\n : (rule.split(\"/\")[1] ?? rule).toUpperCase()),\n )\n return [...new Set(names)].join(\"、\")\n}\n\n/** 提交时显式追加文件，不修改原生 file input。 */\nfunction appendFiles(\n formData: FormData,\n name: string,\n items: FileUploadItem[],\n) {\n for (const item of items) formData.append(name, item.file, item.file.name)\n}\nfunction interpolate(\n template: string,\n values: Record,\n) {\n return template.replace(/\\{(\\w+)\\}/g, (match, key: string) =>\n String(values[key] ?? match),\n )\n}\nexport {\n appendFiles,\n acceptsFile,\n describeAccept,\n formatFileSize,\n validateFiles,\n interpolate,\n}\n", "type": "registry:ui", "target": "@ui/file-upload/utils.ts" }, { "path": "src/registry/hooks/use-controllable-state.ts", "content": "\"use client\"\n\nimport * as React from \"react\"\n\ntype UseControllableStateParams = {\n /** 受控值；传入后组件不再维护内部状态 */\n prop?: T\n /** 非受控时的初始值 */\n defaultProp: T\n /** 值变化时回调（受控与非受控都会触发） */\n onChange?: (value: T) => void\n}\n\n/**\n * 同时支持受控与非受控的状态 hook。\n * 约定见 component-conventions 技能第 4 节：open/defaultOpen/onOpenChange 等成对 props 都用它实现。\n */\nfunction useControllableState({\n prop,\n defaultProp,\n onChange,\n}: UseControllableStateParams) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n const isControlled = prop !== undefined\n const value = isControlled ? prop : uncontrolled\n\n // 用 ref 保存最新的回调和值，保证 setValue 引用稳定\n const onChangeRef = React.useRef(onChange)\n const valueRef = React.useRef(value)\n React.useEffect(() => {\n onChangeRef.current = onChange\n valueRef.current = value\n })\n\n const setValue = React.useCallback(\n (next: React.SetStateAction) => {\n const resolved =\n typeof next === \"function\"\n ? (next as (prev: T) => T)(valueRef.current)\n : next\n if (Object.is(resolved, valueRef.current)) return\n valueRef.current = resolved\n if (!isControlled) setUncontrolled(resolved)\n onChangeRef.current?.(resolved)\n },\n [isControlled],\n )\n\n return [value, setValue] as const\n}\n\nexport { useControllableState }\n", "type": "registry:ui", "target": "hooks/use-controllable-state.ts" }, { "path": "src/registry/ui/file-upload/file-upload-camera.tsx", "content": "\"use client\"\nimport * as React from \"react\"\nimport { Dialog } from \"@base-ui/react/dialog\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { FileUploadPreview, IdCardFrontIllustration } from \"./file-upload-parts\"\nimport type { FileUploadLabels } from \"./config\"\n\n// 相机实时画面需固定黑白对比。\n// registry-lint-disable-next-line no-hardcoded-color\nconst cameraClass =\n \"fixed inset-0 z-50 flex flex-col items-center justify-center overflow-hidden bg-black text-white outline-none\"\n// registry-lint-disable-next-line no-hardcoded-color\nconst actionsClass =\n \"absolute inset-x-0 bottom-0 z-10 grid grid-cols-[1fr_auto_1fr] items-center gap-3 bg-black/60 px-4 pt-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]\"\n// registry-lint-disable-next-line no-hardcoded-color\nconst ghostClass = \"text-white hover:bg-white/10 hover:text-white\"\n// registry-lint-disable-next-line no-hardcoded-color\nconst outlineClass =\n \"border-white/30 bg-transparent text-white hover:bg-white/10 hover:text-white\"\n// registry-lint-disable-next-line no-hardcoded-color\nconst primaryClass = \"bg-white text-black hover:bg-white/90\"\n// registry-lint-disable-next-line no-hardcoded-color\nconst shutterClass =\n \"grid size-16 place-items-center rounded-full border-4 border-white outline-none focus-visible:ring-3 focus-visible:ring-white/60 disabled:opacity-50 [&>span]:transition-transform active:[&>span]:scale-90 motion-reduce:[&>span]:transition-none\"\n// registry-lint-disable-next-line no-hardcoded-color\nconst shutterDotClass = \"size-12 rounded-full bg-white\"\nfunction FileUploadCamera({\n label,\n labels,\n placeholder,\n onClose,\n onSelect,\n onAlbum,\n onError,\n}: {\n label: string\n labels: FileUploadLabels\n placeholder?: React.ReactNode\n onClose: () => void\n onSelect: (file: File) => void\n onAlbum: () => void\n onError: () => void\n}) {\n const video = React.useRef(null)\n const frame = React.useRef(null)\n const [photo, setPhoto] = React.useState(null)\n const [ready, setReady] = React.useState(false)\n const fail = React.useEffectEvent(onError)\n const close = React.useEffectEvent(onClose)\n React.useEffect(() => {\n if (photo) return\n let disposed = false\n let stream: MediaStream | undefined\n navigator.mediaDevices\n .getUserMedia({ video: { facingMode: \"environment\" }, audio: false })\n .then(async (next) => {\n if (disposed) {\n for (const track of next.getTracks()) track.stop()\n return\n }\n stream = next\n if (video.current) {\n video.current.srcObject = next\n await video.current.play()\n setReady(true)\n }\n })\n .catch(() => {\n if (!disposed) fail()\n })\n function hidden() {\n if (document.hidden) close()\n }\n document.addEventListener(\"visibilitychange\", hidden)\n return () => {\n disposed = true\n for (const track of stream?.getTracks() ?? []) track.stop()\n document.removeEventListener(\"visibilitychange\", hidden)\n }\n }, [photo])\n async function shoot() {\n const source = video.current\n const target = frame.current\n if (!source || !target || !source.videoWidth) return\n try {\n const view = source.getBoundingClientRect()\n const crop = target.getBoundingClientRect()\n const scale = Math.max(\n view.width / source.videoWidth,\n view.height / source.videoHeight,\n )\n const x =\n (crop.left - view.left + (source.videoWidth * scale - view.width) / 2) /\n scale\n const y =\n (crop.top - view.top + (source.videoHeight * scale - view.height) / 2) /\n scale\n const canvas = document.createElement(\"canvas\")\n canvas.width = Math.round(crop.width / scale)\n canvas.height = Math.round(crop.height / scale)\n const context = canvas.getContext(\"2d\")\n if (!context) throw new Error()\n context.drawImage(\n source,\n x,\n y,\n crop.width / scale,\n crop.height / scale,\n 0,\n 0,\n canvas.width,\n canvas.height,\n )\n const blob = await new Promise((resolve) =>\n canvas.toBlob(resolve, \"image/jpeg\", 0.9),\n )\n if (!blob) throw new Error()\n setReady(false)\n setPhoto(new File([blob], `${label}.jpg`, { type: \"image/jpeg\" }))\n } catch {\n onError()\n }\n }\n return (\n {\n if (!open) onClose()\n }}\n >\n \n \n {/* 相机画面需要固定黑白对比，避免主题色在实时画面上不可读。 */}\n \n {!photo && (\n \n )}\n
\n \n {photo\n ? labels.cameraConfirm\n : labels.cameraAlign.replace(\"{label}\", label)}\n \n \n {labels.cameraLight}\n \n
\n \n {photo ? (\n \n ) : (\n <>\n
\n
svg]:size-full [&>svg]:text-inherit\">\n {placeholder ?? }\n
\n {[\n \"top-0 left-0 border-t-4 border-l-4 rounded-tl-xl\",\n \"top-0 right-0 border-t-4 border-r-4 rounded-tr-xl\",\n \"bottom-0 left-0 border-b-4 border-l-4 rounded-bl-xl\",\n \"bottom-0 right-0 border-b-4 border-r-4 rounded-br-xl\",\n ].map((corner) => (\n \n ))}\n \n )}\n
\n
\n {photo ? (\n // 确认页两个按钮等宽并排，占满三列\n
\n setPhoto(null)}\n >\n {labels.replace}\n \n onSelect(photo)}\n >\n {labels.cameraUse}\n \n
\n ) : (\n <>\n \n {labels.cameraCancel}\n \n {/* 快门是相机界面的专用控件，沿用系统相机的 64px 圆形外观，不走 Button 的三档高度 */}\n void shoot()}\n className={shutterClass}\n >\n \n \n \n {labels.album}\n \n \n )}\n
\n \n \n \n )\n}\nexport { FileUploadCamera }\n", "type": "registry:ui", "target": "@ui/file-upload/file-upload-camera.tsx" } ], "cssVars": { "theme": { "color-edge": "var(--edge)" }, "light": { "edge": "color-mix(in oklch, var(--foreground) 12%, transparent)" }, "dark": { "edge": "color-mix(in oklch, var(--foreground) 18%, transparent)" } }, "type": "registry:ui" }