file-upload-demo

1"use client";
2 
3import { Upload, X } from "lucide-react";
4import * as React from "react";
5import { toast } from "sonner";
6import { Button } from "@/registry/bases/base/ui/button";
7import {
8  FileUpload,
9  FileUploadDropzone,
10  FileUploadItem,
11  FileUploadItemDelete,
12  FileUploadItemMetadata,
13  FileUploadItemPreview,
14  FileUploadList,
15  FileUploadTrigger,
16} from "@/registry/bases/base/ui/file-upload";
17 
18export default function FileUploadDemo() {
19  const [files, setFiles] = React.useState<File[]>([]);
20 
21  const onFileReject = React.useCallback((file: File, message: string) => {
22    toast(message, {
23      description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
24    });
25  }, []);
26 
27  return (
28    <FileUpload
29      maxFiles={2}
30      maxSize={5 * 1024 * 1024}
31      className="w-full max-w-md"
32      value={files}
33      onValueChange={setFiles}
34      onFileReject={onFileReject}
35      multiple
36    >
37      <FileUploadDropzone>
38        <div className="flex flex-col items-center gap-1 text-center">
39          <div className="flex items-center justify-center rounded-full border p-2.5">
40            <Upload className="size-6 text-muted-foreground" />
41          </div>
42          <p className="font-medium text-sm">Drag & drop files here</p>
43          <p className="text-muted-foreground text-xs">
44            Or click to browse (max 2 files, up to 5MB each)
45          </p>
46        </div>
47        <FileUploadTrigger
48          render={(props) => (
49            <Button
50              variant="outline"
51              size="sm"
52              className="mt-2 w-fit"
53              {...props}
54            >
55              Browse files
56            </Button>
57          )}
58        />
59      </FileUploadDropzone>
60      <FileUploadList>
61        {files.map((file, index) => (
62          <FileUploadItem key={index} value={file}>
63            <FileUploadItemPreview />
64            <FileUploadItemMetadata />
65            <FileUploadItemDelete
66              render={(props) => (
67                <Button
68                  variant="ghost"
69                  size="icon"
70                  className="size-7"
71                  {...props}
72                >
73                  <X />
74                </Button>
75              )}
76            />
77          </FileUploadItem>
78        ))}
79      </FileUploadList>
80    </FileUpload>
81  );
82}