Listing photos for real estate and rentals: tag each photo with a room, see which rooms are still missing, and aim for the recommended count.
"use client"
import { useUploader } from "@uploadcn/react"
import { useSampleFiles } from "@/examples/_demo"
import { PropertyPhotos } from "@/components/property-photos"
export default function PropertyPhotosExample() {
const uploader = useUploader({ accept: "image/*" })
useSampleFiles(uploader, "images")
return (
<div className="w-full max-w-xl">
<PropertyPhotos uploader={uploader} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/property-photosUsage
import { PropertyPhotos } from "@/components/property-photos"<PropertyPhotos
rooms={[
"Exterior",
"Living room",
"Kitchen",
"Bedroom",
"Bathroom",
"Garden",
]}
recommended={15}
onChange={(photos) => save(photos)}
/>Room tags live on each item's meta.room (set with uploader.update), and the room picker is a native <select> so it works everywhere, including screen readers.
Props
Prop
Type