A spinning record for music and podcast uploads: it spins up while tracks upload, the tonearm follows progress and it coasts to a stop when done.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { VinylUpload } from "@/components/vinyl-upload"
export default function VinylUploadExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader, "audio")
return (
<div className="flex w-full justify-center">
<VinylUpload uploader={uploader} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/vinyl-uploadUsage
import { VinylUpload } from "@/components/vinyl-upload"<VinylUpload maxSize={200 * 1024 * 1024} />The record has momentum: its speed is a spring, so it spins up when uploads start and coasts to a stop instead of freezing. The tonearm angle tracks the overall percent. With reduced motion the record stays still and the arm jumps to its position.
It uploads through your adapter like every other component, so it works with S3, R2, Cloudinary, local disk or your own API.
Props
Prop
Type