Product photos for a storefront: the first image is the cover, the rest a gallery you reorder by dragging or with the keyboard.
"use client"
import { useUploader } from "@uploadcn/react"
import { useSampleFiles } from "@/examples/_demo"
import { ProductMediaUpload } from "@/components/product-media-upload"
export default function ProductMediaUploadExample() {
const uploader = useUploader({ accept: "image/*", maxFiles: 8 })
useSampleFiles(uploader, "images")
return (
<div className="w-full max-w-xl">
<ProductMediaUpload uploader={uploader} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/product-media-uploadUsage
import { ProductMediaUpload } from "@/components/product-media-upload"<ProductMediaUpload
maxFiles={8}
onChange={(images) => setImages(images.map((image) => image.result))}
/>Every tile has keyboard-accessible buttons to make it the cover or move it, so reordering doesn't depend on drag and drop. Order is kept in the component and reported through onChange.
Props
Prop
Type