file-upload

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import {
6  FileArchiveIcon,
7  FileAudioIcon,
8  FileCodeIcon,
9  FileCogIcon,
10  FileIcon,
11  FileTextIcon,
12  FileVideoIcon,
13} from "lucide-react";
14import * as React from "react";
15import { cn } from "@/lib/utils";
16import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
17import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
18import { useDirection } from "@/registry/bases/base/ui/direction";
19 
20const ROOT_NAME = "FileUpload";
21const DROPZONE_NAME = "FileUploadDropzone";
22const TRIGGER_NAME = "FileUploadTrigger";
23const LIST_NAME = "FileUploadList";
24const ITEM_NAME = "FileUploadItem";
25const ITEM_PREVIEW_NAME = "FileUploadItemPreview";
26const ITEM_METADATA_NAME = "FileUploadItemMetadata";
27const ITEM_PROGRESS_NAME = "FileUploadItemProgress";
28const ITEM_DELETE_NAME = "FileUploadItemDelete";
29const CLEAR_NAME = "FileUploadClear";
30 
31function formatBytes(bytes: number) {
32  if (bytes === 0) return "0 B";
33  const sizes = ["B", "KB", "MB", "GB", "TB"];
34  const i = Math.floor(Math.log(bytes) / Math.log(1024));
35  return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
36}
37 
38function getFileIcon(file: File) {
39  const type = file.type;
40  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
41 
42  if (type.startsWith("video/")) {
43    return <FileVideoIcon />;
44  }
45 
46  if (type.startsWith("audio/")) {
47    return <FileAudioIcon />;
48  }
49 
50  if (
51    type.startsWith("text/") ||
52    ["txt", "md", "rtf", "pdf"].includes(extension)
53  ) {
54    return <FileTextIcon />;
55  }
56 
57  if (
58    [
59      "html",
60      "css",
61      "js",
62      "jsx",
63      "ts",
64      "tsx",
65      "json",
66      "xml",
67      "php",
68      "py",
69      "rb",
70      "java",
71      "c",
72      "cpp",
73      "cs",
74    ].includes(extension)
75  ) {
76    return <FileCodeIcon />;
77  }
78 
79  if (["zip", "rar", "7z", "tar", "gz", "bz2"].includes(extension)) {
80    return <FileArchiveIcon />;
81  }
82 
83  if (
84    ["exe", "msi", "app", "apk", "deb", "rpm"].includes(extension) ||
85    type.startsWith("application/")
86  ) {
87    return <FileCogIcon />;
88  }
89 
90  return <FileIcon />;
91}
92 
93type Direction = "ltr" | "rtl";
94 
95interface FileState {
96  file: File;
97  progress: number;
98  error?: string;
99  status: "idle" | "uploading" | "error" | "success";
100}
101 
102interface StoreState {
103  files: Map<File, FileState>;
104  dragOver: boolean;
105  invalid: boolean;
106}
107 
108type StoreAction =
109// … truncated