File Upload Upload Queue

1"use client";
2// beui.dev/components/blocks/file-upload
3 
4import {
5  AlertCircle,
6  CheckCircle2,
7  FileArchive,
8  FileAudio,
9  FileCode2,
10  FileIcon,
11  FileImage,
12  FileSpreadsheet,
13  FileText,
14  FileVideo,
15  Loader2,
16  RotateCcw,
17  UploadCloud,
18  X,
19} from "lucide-react";
20import { AnimatePresence, motion, useReducedMotion } from "motion/react";
21import { useCallback, useId, useRef, useState } from "react";
22import { EASE_OUT } from "@/lib/ease";
23import { cn } from "@/lib/utils";
24 
25export type FileUploadStatus = "queued" | "uploading" | "success" | "error";
26export type FileUploadVariant = "default" | "centered";
27 
28export type FileUploadItem = {
29  id: string;
30  name: string;
31  size: number;
32  type?: string;
33  progress?: number;
34  status?: FileUploadStatus;
35  error?: string;
36  file?: File;
37};
38 
39export type FileUploadClassNames = {
40  root?: string;
41  dropzone?: string;
42  queue?: string;
43  item?: string;
44  leading?: string;
45  content?: string;
46  name?: string;
47  meta?: string;
48  progress?: string;
49  action?: string;
50};
51 
52export interface FileUploadProps {
53  value?: FileUploadItem[];
54  defaultValue?: FileUploadItem[];
55  onValueChange?: (items: FileUploadItem[]) => void;
56  onFilesAdded?: (items: FileUploadItem[], files: File[]) => void;
57  onRemove?: (item: FileUploadItem) => void;
58  onRetry?: (item: FileUploadItem) => void;
59  accept?: string;
60  multiple?: boolean;
61  maxFiles?: number;
62  disabled?: boolean;
63  variant?: FileUploadVariant;
64  title?: string;
65  description?: string;
66  browseLabel?: string;
67  className?: string;
68  classNames?: FileUploadClassNames;
69}
70 
71const ROW_TRANSITION = { duration: 0.22, ease: EASE_OUT } as const;
72const FAST_TRANSITION = { duration: 0.16, ease: EASE_OUT } as const;
73 
74const STATUS_LABEL: Record<FileUploadStatus, string> = {
75  queued: "Queued",
76  uploading: "Uploading",
77  success: "Uploaded",
78  error: "Failed",
79};
80 
81const STATUS_TONE: Record<FileUploadStatus, string> = {
82  queued: "text-muted-foreground",
83  uploading: "text-foreground",
84  success: "text-emerald-600 dark:text-emerald-400",
85  error: "text-destructive",
86};
87 
88function useControllableUpload({
89  value,
90  defaultValue,
91  onValueChange,
92}: {
93  value?: FileUploadItem[];
94  defaultValue?: FileUploadItem[];
95  onValueChange?: (items: FileUploadItem[]) => void;
96}) {
97  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
98  const isControlled = value !== undefined;
99  const items = value ?? internalValue;
100 
101  const setItems = useCallback(
102    (next: FileUploadItem[]) => {
103// … truncated