Upload Multiple Files

1import {
2  AlertCircleIcon,
3  FileArchiveIcon,
4  FileIcon,
5  FileSpreadsheetIcon,
6  FileTextIcon,
7  HeadphonesIcon,
8  ImageIcon,
9  Trash2Icon,
10  UploadIcon,
11  VideoIcon,
12  XIcon,
13} from 'lucide-react';
14import { useState } from 'react';
15import { Button } from '@/components/ui/button';
16import {
17  type FileWithPreview,
18  formatBytes,
19  useFileUpload,
20} from '@/hooks/use-file-upload';
21import { useUploadFile } from '@/registry/default/storage/use-upload-file';
22 
23const getFileIcon = (file: { file: File | { type: string; name: string } }) => {
24  const fileType = file.file instanceof File ? file.file.type : file.file.type;
25  const fileName = file.file instanceof File ? file.file.name : file.file.name;
26 
27  const iconMap = {
28    pdf: {
29      icon: FileTextIcon,
30      conditions: (type: string, name: string) =>
31        type.includes('pdf') ||
32        name.endsWith('.pdf') ||
33        type.includes('word') ||
34        name.endsWith('.doc') ||
35        name.endsWith('.docx'),
36    },
37    archive: {
38      icon: FileArchiveIcon,
39      conditions: (type: string, name: string) =>
40        type.includes('zip') ||
41        type.includes('archive') ||
42        name.endsWith('.zip') ||
43        name.endsWith('.rar'),
44    },
45    excel: {
46      icon: FileSpreadsheetIcon,
47      conditions: (type: string, name: string) =>
48        type.includes('excel') ||
49        name.endsWith('.xls') ||
50        name.endsWith('.xlsx'),
51    },
52    video: {
53      icon: VideoIcon,
54      conditions: (type: string) => type.includes('video/'),
55    },
56    audio: {
57      icon: HeadphonesIcon,
58      conditions: (type: string) => type.includes('audio/'),
59    },
60    image: {
61      icon: ImageIcon,
62      conditions: (type: string) => type.startsWith('image/'),
63    },
64  };
65 
66  for (const { icon: Icon, conditions } of Object.values(iconMap)) {
67    if (conditions(fileType, fileName)) {
68      return <Icon className="size-5 opacity-60" />;
69    }
70  }
71 
72  return <FileIcon className="size-5 opacity-60" />;
73};
74 
75const getFilePreview = (file: {
76  file: File | { type: string; name: string; url?: string };
77}) => {
78  const fileType = file.file instanceof File ? file.file.type : file.file.type;
79  const fileName = file.file instanceof File ? file.file.name : file.file.name;
80 
81  const renderImage = (src: string) => (
82    <img
83      alt={fileName}
84      className="size-full rounded-t-[inherit] object-cover"
85      src={src}
86    />
87  );
88 
89  return (
90// … truncated