Photo Uploader
A listing-photo grid: add images, drag to reorder, the first tile is the cover, and each tile can be removed.
photo-uploader.tsxphoto-uploader.css
Checking access…
Overview
Pick or drop images and they appear as square tiles with an upload ring. Drag a tile to reorder (or use the arrow buttons on focus); whichever is first gets the Cover badge.
A counter shows how many of the maximum are used, and the add tile hides at the limit.
When to use
- Marketplace listings, profiles, property and product forms.
When not to use
- Single avatar: use an avatar upload.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/photo-uploader.json$
npx shadcn@latest add https://sundaeui.dev/r/photo-uploader.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/photo-uploader.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/photo-uploader.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy photo-uploader.tsx and photo-uploader.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { PhotoUploader } from '@/components/sundae/photo-uploader'
<PhotoUploader />Props
| Prop | Type | Default |
|---|---|---|
maxMaximum photos. | number | 8 |
onChangeCalled with files in order. | (files: File[]) => void | — |
acceptAccepted types. | string | 'image/*' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Tiles are list items with Move earlier / Move later / Remove buttons, so reordering never needs dragging.
- Reorders and removals are announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-phu; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Drag
- Reorder
- Tab to tile
- Reveal move / remove buttons
FAQ
- Is Photo Uploader free?
- Photo Uploader is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Photo Uploader?
- Run npx shadcn@latest add https://sundaeui.dev/r/photo-uploader.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Photo Uploader support keyboard and screen readers?
- Tiles are list items with Move earlier / Move later / Remove buttons, so reordering never needs dragging. Reorders and removals are announced.
- Does Photo Uploader respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →- Pro
Drop Zone
Forms · Refined Upload Queue
Forms · RefinedAvatar Upload
Forms · RefinedOTP Field
Forms · Refined- Pro
Onboarding Flow
Forms · Refined - Pro
Wheel Picker
Forms · Refined