file-upload

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