Upload Dialog

"use client"

import { demoAdapter } from "@/examples/_demo"
import { UploadDialog } from "@/components/upload-dialog"

export default function UploadDialogExample() {
  return <UploadDialog adapter={demoAdapter} />
}

InstallationCopy Anchor Link

npx shadcn@latest add @uploadcn/upload-dialog

UsageCopy Anchor Link

import { UploadDialog } from "@/components/upload-dialog"

<UploadDialog label="Upload files" onDone={(items) => refresh()} />

Files are added with autoUpload: false so nothing uploads until the user confirms. Closing the dialog mid-upload only hides it, uploads continue and the dialog shows their progress when reopened.

PropsCopy Anchor Link