File Upload

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-upload

Usage

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" />
}

On this page