The upload queue as a data table, name, type, size, status and progress in columns. Drop files anywhere on the table.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { UploadTable } from "@/components/upload-table"
export default function UploadTableExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader)
return <UploadTable uploader={uploader} title="Project files" />
}
Installation
npx shadcn@latest add @uploadcn/upload-tableUsage
import { UploadTable } from "@/components/upload-table"<UploadTable title="Project files" />Rows are rendered with UploadItemContext, so every UploadItem* part (status, progress, actions, error) works inside table cells. The drop target is an UploadOverlay.
Props
Prop
Type