file-upload-uploadthing-demo

1"use client";
2 
3import { Upload, X } from "lucide-react";
4import * as React from "react";
5import { toast } from "sonner";
6import { UploadThingError } from "uploadthing/server";
7import { uploadFiles } from "@/lib/uploadthing";
8import { Button } from "@/registry/bases/base/ui/button";
9import {
10  FileUpload,
11  FileUploadDropzone,
12  FileUploadItem,
13  FileUploadItemDelete,
14  FileUploadItemMetadata,
15  FileUploadItemPreview,
16  FileUploadItemProgress,
17  FileUploadList,
18  type FileUploadProps,
19  FileUploadTrigger,
20} from "@/registry/bases/base/ui/file-upload";
21 
22export default function FileUploadUploadThingDemo() {
23  const [isUploading, setIsUploading] = React.useState(false);
24  const [files, setFiles] = React.useState<File[]>([]);
25 
26  const onUpload: NonNullable<FileUploadProps["onUpload"]> = React.useCallback(
27    async (files, { onProgress }) => {
28      try {
29        setIsUploading(true);
30        const res = await uploadFiles("imageUploader", {
31          files,
32          onUploadProgress: ({ file, progress }) => {
33            onProgress(file, progress);
34          },
35        });
36 
37        toast.success("Uploaded files:", {
38          description: (
39            <pre className="mt-2 w-80 rounded-md bg-accent/30 p-4 text-accent-foreground">
40              <code>
41                {JSON.stringify(
42                  res.map((file) =>
43                    file.name.length > 25
44                      ? `${file.name.slice(0, 25)}...`
45                      : file.name,
46                  ),
47                  null,
48                  2,
49                )}
50              </code>
51            </pre>
52          ),
53        });
54      } catch (error) {
55        setIsUploading(false);
56 
57        if (error instanceof UploadThingError) {
58          const errorMessage =
59            error.data && "error" in error.data
60              ? error.data.error
61              : "Upload failed";
62          toast.error(errorMessage);
63          return;
64        }
65 
66        toast.error(
67          error instanceof Error ? error.message : "An unknown error occurred",
68        );
69      } finally {
70        setIsUploading(false);
71      }
72    },
73    [],
74  );
75 
76  const onFileReject = React.useCallback((file: File, message: string) => {
77    toast(message, {
78      description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
79    });
80  }, []);
81 
82  return (
83    <FileUpload
84      accept="image/*"
85      maxFiles={2}
86      maxSize={4 * 1024 * 1024}
87      className="w-full max-w-md"
88// … truncated