File detail

A React block (a whole screen) in Beamline's CMS & media app.

One file's details. The image with its focal point (where crops keep the subject), set by clicking the picture and said in words, or none said. Metadata: title, description (read as alternative text; missing said on danger), tags, folder; what it is: type, size, dimensions, who uploaded it and when; everywhere it's used, or nothing. Crop or rotate (image-cropper with a shape) never overwrites by itself: Apply asks to save a copy (the original and every use stay) or replace the original, listing every place that changes (warning) before Replace; the outcome is said. Details saved with Undo and Save; refusals said.

Use it for

A media library's file page: metadata, alternative text, focal point and where the file is used.
Editing an image without silently changing everywhere it appears.

Not for

Browsing and organising many files (file-manager).
Generating or retouching images (image studio screens).

Anatomy

header: the tool's mark, the file's title, its filename
media: the picture with its focal point, the focal point in words, Crop or rotate; while editing the cropper with a shape, Apply, then the copy-or-replace choice with what changes
details: title, description, tags, folder; type, size, dimensions, uploaded; where it's used; Undo and Save

States

focal point set or none; description present or missing
editing, choosing copy or replace (with or without uses), saved as a copy, replaced
details unsaved, saved, refused; unused file
phone: the picture above the details
right to left: mirrored; the focal point stays on the subject
reduced motion: through the tokens

Keyboard

Tab to the picture (Enter sets the focal point at its centre), Crop or rotate, the cropper's toolbar, the choice, and each detail field, Undo and Save

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`file`	`FileRecord`	—
`defaultFile`	`FileRecord`	—
`onFileChange`	`((f: FileRecord) => void)`	—
`folders` (required)	`{ id: string; path: string; }[]`	—
`onSave` (required)	`(f: FileRecord) => Promise<{ ok: true; } \| { refused: string; }>`	—
`onEditImage` (required)	`(req: { edit: ImageEdit; mode: "copy" \| "replace"; }) => Promise<{ file: FileRecord; } …`	—	Saves an edit as a new file, or over the original.
`defaultEditing`	`boolean`	—
`defaultChoosing`	`boolean`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { FileDetail } from "@beamline/file-detail";

Get it

File detail is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent