Dropzone

$pnpm dlx shadcn@latest add @nextui/dropzone

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useState } from "react";
4import { FileDropzone, type DropzoneFile } from "@/components/nextui/dropzone";
5
6export function Upload() {
7  const [files, setFiles] = useState<DropzoneFile[]>([]);
8  const update = (id: string, patch: Partial<DropzoneFile>) =>
9    setFiles((list) => list.map((f) => (f.id === id ? { ...f, ...patch } : f)));
10
11  return (
12    <FileDropzone
13      files={files}
14      maxSizeMB={25}
15      accept="image/*,.pdf"
16      onFiles={(accepted, rejected) => {
17        const added = accepted.map((file) => ({ id: crypto.randomUUID(), name: file.name, size: file.size, status: "uploading" as const, progress: 0 }));
18        const tooBig = rejected.map((file) => ({ id: crypto.randomUUID(), name: file.name, size: file.size, status: "rejected" as const }));
19        setFiles((list) => [...list, ...added, ...tooBig]);
20        // Start your uploads here and call update(id, { progress }) / update(id, { status: "done" }).
21      }}
22      onRemove={(id) => setFiles((list) => list.filter((f) => f.id !== id))}
23      onRetry={(id) => update(id, { status: "uploading", progress: 0 })}
24      onClear={() => setFiles([])}
25    />
26  );
27}