A dropzone with a full upload queue, progress summary and batch actions.
"use client"
import { FileUpload } from "@/components/file-upload"
export default function BasicUploadExample() {
return <FileUpload maxSize={50 * 1000 * 1000} />
}
Installation
npx shadcn@latest add @uploadcn/file-uploadUsage
import { FileUpload } from "@/components/file-upload"<FileUpload
accept="image/*,application/pdf"
maxSize={20_000_000}
maxFiles={10}
/>Props
Prop
Type
Examples
Multiple files
"use client"
import { FileUpload } from "@/components/file-upload"
export default function MultipleUploadExample() {
return (
<FileUpload
maxFiles={10}
maxSize={25 * 1000 * 1000}
title="Upload up to 10 files"
/>
)
}
Batch upload
"use client"
import { toast } from "sonner"
import { FileUpload } from "@/components/file-upload"
export default function BatchUploadExample() {
return (
<FileUpload
autoUpload={false}
title="Select files, review them, then upload"
description='Nothing is sent until you press "Upload"'
onComplete={(items) =>
toast.success(
`Batch finished: ${items.filter((item) => item.status === "success").length} uploaded`
)
}
/>
)
}
S3 presigned
"use client"
import { s3Adapter } from "@uploadcn/core"
import { demoTransport } from "@/examples/_demo"
import { FileUpload } from "@/components/file-upload"
/**
* 1. The browser asks /api/upload for a signed PUT URL (size + type locked).
* 2. Bytes go straight to the bucket, never through your server.
* 3. The route verifies the object and runs `onUploadComplete`.
* Files ≥ 64 MB automatically switch to resumable multipart.
*/
const adapter = s3Adapter({
endpoint: "/api/upload",
transport: demoTransport, // docs only, see examples/_demo.ts
})
export default function S3PresignedExample() {
return <FileUpload adapter={adapter} title="Upload directly to S3" />
}