File Upload Attachment Upload

1"use client";
2// beui.dev/components/blocks/file-upload
3 
4import {
5  AlertCircle,
6  Check,
7  ExternalLink,
8  FileImage,
9  Link as LinkIcon,
10  LoaderCircle,
11  Mic,
12  Paperclip,
13  Pause,
14  Play,
15  RotateCcw,
16  Upload,
17  X,
18} from "lucide-react";
19import {
20  AnimatePresence,
21  LayoutGroup,
22  motion,
23  useReducedMotion,
24} from "motion/react";
25import {
26  useCallback,
27  useEffect,
28  useId,
29  useRef,
30  useState,
31} from "react";
32import { createPortal } from "react-dom";
33import { Tooltip } from "@/components/motion/tooltip";
34import {
35  EASE_OUT,
36  SPRING_LAYOUT,
37  SPRING_PRESS,
38} from "@/lib/ease";
39import { cn } from "@/lib/utils";
40 
41export type AttachmentUploadKind = "file" | "link" | "image" | "audio";
42export type AttachmentRejectReason = "too-large" | "max-files";
43export type AttachmentUploadStatus =
44  | "idle"
45  | "uploading"
46  | "complete"
47  | "failed";
48 
49export type AttachmentUploadItem = {
50  id: string;
51  name: string;
52  kind: AttachmentUploadKind;
53  size?: number;
54  href?: string;
55  previewUrl?: string;
56  currentTime?: number;
57  duration?: number;
58  status?: AttachmentUploadStatus;
59  error?: string;
60  file?: File;
61};
62 
63export type AttachmentUploadClassNames = {
64  dropzone?: string;
65  list?: string;
66  row?: string;
67};
68 
69export interface AttachmentUploadProps {
70  value?: AttachmentUploadItem[];
71  defaultValue?: AttachmentUploadItem[];
72  onValueChange?: (items: AttachmentUploadItem[]) => void;
73  onFilesAdded?: (items: AttachmentUploadItem[], files: File[]) => void;
74  onFilesRejected?: (files: File[], reason: AttachmentRejectReason) => void;
75  onRemove?: (item: AttachmentUploadItem) => void;
76  onRetry?: (item: AttachmentUploadItem) => void;
77  playingId?: string;
78  onAudioToggle?: (item: AttachmentUploadItem) => void;
79  accept?: string;
80  multiple?: boolean;
81  maxFiles?: number;
82  maxFileSize?: number;
83  disabled?: boolean;
84  title?: string;
85  description?: string;
86  attachmentsLabel?: string;
87  className?: string;
88  classNames?: AttachmentUploadClassNames;
89}
90 
91const ITEM_TRANSITION = { duration: 0.2, ease: EASE_OUT } as const;
92const DEFAULT_MAX_FILE_SIZE = 500 * 1024 * 1024;
93const UPLOAD_PROGRESS_MS = 900;
94const UPLOAD_COMPLETE_HOLD_MS = 1000;
95const REMOVE_PENDING_MS = 420;
96 
97const WAVEFORM_BARS = [
98  18, 31, 24, 39, 30, 43, 27, 18, 9, 29, 38, 24, 34, 18, 26, 37, 21, 14,
99  7, 11, 22, 35, 18, 26, 41, 29, 17, 33,
100].map((height, index) => ({ id: `wave-${index}-${height}`, height }));
101 
102function useControllableList<T>({
103  value,
104  defaultValue,
105  onValueChange,
106}: {
107// … truncated