File

1"use client";
2
3import * as React from "react";
4
5import { Alert, AlertDescription } from "@/components/ui/alert";
6import { Button } from "@/components/ui/button";
7import { Progress } from "@/components/ui/progress";
8import { useFiles as useFileContext } from "@/hooks/use-file";
9import { messages, Mime, workflow } from "@/lib/file";
10import { cn } from "@/lib/utils";
11import { X } from "lucide-react";
12
13const contextMap = new Map<string, React.Context<FileContext>>();
14
15export function bindContext(providerId: string): React.Context<FileContext> {
16  if (!contextMap.has(providerId))
17    contextMap.set(
18      providerId,
19      React.createContext<FileContext>(DefaultFileContext),
20    );
21  return contextMap.get(providerId)!;
22}
23
24type Metadata = Pick<File, "name" | "size" | "type">;
25
26type FileContext = {
27  providerId: string;
28  maxFiles: number;
29  maxSize: number;
30  accept: Mime[];
31  files: File[];
32  metadatas: Metadata[];
33  error: string | null;
34  progress: number | null;
35  addFiles: (files: FileList | null) => void;
36  removeFile: (index: number) => void;
37  clearFiles: () => void;
38};
39
40type FileProviderProps = {
41  providerId: string;
42  maxFiles: number;
43  maxSize: number;
44  accept: Mime[];
45  children: React.ReactNode;
46};
47
48const DefaultFileContext: FileContext = {
49  providerId: "",
50  maxFiles: 1, // 1 File
51  maxSize: 1024 * 1024, // 1 MB
52  accept: [],
53  files: [],
54  metadatas: [],
55  error: null,
56  progress: null,
57  addFiles: () => {},
58  removeFile: () => {},
59  clearFiles: () => {},
60};
61
62function getFileSize(bytes: number) {
63  if (!bytes || bytes === 0) return "0 B";
64  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
65  const i = Math.floor(Math.log(bytes) / Math.log(1024));
66  const size = bytes / Math.pow(1024, i);
67  return `${size.toFixed(size % 1 === 0 ? 0 : 2)} ${units[i]}`;
68}
69
70function FileProvider({
71  providerId,
72  maxFiles,
73  maxSize,
74  accept,
75  children,
76}: FileProviderProps) {
77  const [files, setFiles] = React.useState<File[]>([]);
78  const [metadatas, setMetadatas] = React.useState<Metadata[]>([]);
79  const [error, setError] = React.useState<string | null>(null);
80  const [progress, setProgress] = React.useState<number | null>(null);
81
82  const addFiles = (fileList: FileList | null) => {
83    setError(null);
84
85    if (!fileList || fileList.length === 0)
86      return setError(messages["noFiles"]);
87    const newFiles: File[] = Array.from(fileList);
88
89// … truncated