shadcn.io is not affiliated with official shadcn/ui
Metadata Editor File Upload Block for Radix UI
A photo archive list with a File details sheet shown open: edit title, description, author, keywords and copyright, read the camera fields, strip the location or all metadata, and save to update the frame's summary.
Installation
Overview
Edit what a photo says about itself without opening another page, with this file details sheet for React with Radix UI. It opens from Harbour Road, 9 October, a shoot in Datum Darkroom, a photo archive tool: the page's header holds an outline File details Button, and the five-frame list is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Sheet edits one frame. Title, Description, Author and Copyright are fields, Keywords are Tags you type and remove, and the camera, lens, exposure and time are read only. A "Contains location" row carries a badge and a Strip location action, and a Switch strips all metadata, clearing the fields and the camera facts in the draft. Save details, the only Shine Button, updates the frame's summary line in the drawn list. For preview the sheet is drawn open in place at the end of the frame when the page loads; the header button opens the real Sheet with the same fields. For photo archives, asset libraries and any app that keeps file metadata.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The File details button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same DetailsFields and share the block's state, so edits made in the copy are there in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
What do the two strip actions do?
Strip location clears the position in the draft and the row changes to "No location". Strip all metadata clears Title, Description, Author, Keywords and Copyright, removes the location and the camera facts from the draft, and disables the fields; turn it off to get the last saved values back. Nothing changes in the list until you save, and Cancel throws the draft away.
Which side does the sheet open from?
From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens. On a phone the copy docks to the foot of the frame as a bottom sheet, and the real sheet is full width.
How do the keywords work?
Type a word and press Enter or a comma to add it; paste a comma-separated list to add several. Duplicates are refused, eight is the most, and the X on a tag removes it. They are a list of strings in the block's state, shown with the fields while you edit.
What stays local in the demo, and how do I wire it up?
All of it. The metadata is typed here, no file is read, and Save only updates the drawn list and says in a polite message that no file was changed. In your app read EXIF and IPTC with a library on your server, write the edits back there, and keep the camera facts read only.
Is it accessible from the keyboard?
Yes. The real sheet is named by its title and described by its sentence, focus stays inside until it closes, and Escape, Cancel and the close button return focus to File details. Every field has a visible label. The trigger is the button wrapped in SheetTrigger with asChild, and the sheet is controlled with open and onOpenChange.