shadcn.io is not affiliated with official shadcn/ui
Image Preview File Upload Block for Radix UI
A rental listing's photo step: one large drawn preview over a filmstrip of up to eight photos, with arrows, Remove and Undo, an Add cell, and a polite refusal when a ninth photo is added.
Installation
Overview
Let people check every photo before they publish, with this image preview upload for React with Radix UI. It is the photo step of Listwell, a listing tool for rental homes. A hairline frame with a plus mark on each corner holds a large preview of the selected photo with a Previous and a Next Button over its edges, its name, size and a Cover note under it, and a Remove button. Under it a filmstrip of 56 px thumbnails scrolls sideways, the chosen one ringed, and ends in an Add cell; the header's Shine Button, the only colored control, and the Add cell are both File Upload triggers, and a file dropped on the strip is added too. The counter reads "Photo 2 of 4" over the preview and "4 of 8 used" over the strip. Eight is the most: a ninth is refused in words. Remove takes the selected photo out and an Undo button puts it back in its place. Every picture is a small drawing chosen from the file's name. The bands are ruled by Guides, with a CSS entrance only. For listing editors, galleries and any form with a capped set of images.
FAQ
Where do the pictures come from?
They are drawings, not your files. The block never opens a picked file: it lists its name and size and draws a small scene (hills, a lake, a room, a stairwell or a tower) chosen from the letters of the name, so the same file always gets the same drawing. In your app, render the real image in Picture from an object URL made in an effect and revoked on cleanup.
What happens at eight photos?
CAPACITY is eight. Past it the extra files are not added and the status line says "Eight photos is the most. Remove one to add another." When a pick fits only in part, the ones that fit are added and the line says how many were not. Files that are not images, or are over 20 MB, are refused by name.
How do Remove and Undo work?
Remove drops the selected photo, selects the next one (or the previous one at the end) and moves focus to its thumbnail. Undo appears in the foot and puts the photo back at the position it had, selected and focused. Adding more photos clears the Undo, since the position would no longer mean the same thing.
Is it usable from the keyboard?
Yes. The arrows, every thumbnail, the Add cell, Remove and Undo are buttons with names ("Show living-room.jpg, 1 of 4"), the selected thumbnail carries aria-current, the arrows wrap around, and each change is spoken by the one polite status line. The strip scrolls sideways and Tab moves through its thumbnails.
What stays local, and how do I wire it up?
All of it. Nothing is uploaded or saved; the photos live in the block's state and a reload restores the four typed ones. To wire it, send each accepted file to your server from take, show its upload state on the thumbnail, and keep the cover as the first item of the list you save.