File Uploader

1'use client';
2 
3import { cn } from '@/lib/utils';
4import {
5  AlertCircleIcon,
6  CheckCircleIcon,
7  FileIcon,
8  Trash2Icon,
9  XIcon,
10} from 'lucide-react';
11import * as React from 'react';
12import { type DropzoneOptions } from 'react-dropzone';
13import { Dropzone } from './dropzone';
14import { ProgressBar } from './progress-bar';
15import { formatFileSize, useUploader } from './uploader-provider';
16 
17/**
18 * Displays a list of files with their upload status, progress, and controls.
19 *
20 * @component
21 * @example
22 * ```tsx
23 * <FileList className="my-4" />
24 * ```
25 */
26const FileList = React.forwardRef<
27  HTMLDivElement,
28  React.HTMLAttributes<HTMLDivElement>
29>(({ className, ...props }, ref) => {
30  const { fileStates, removeFile, cancelUpload } = useUploader();
31 
32  if (!fileStates.length) return null;
33 
34  return (
35    <div
36      ref={ref}
37      className={cn('mt-3 flex w-full flex-col gap-2', className)}
38      {...props}
39    >
40      {fileStates.map(({ file, abortController, progress, status, key }) => {
41        return (
42          <div
43            key={key}
44            className="shadow-xs flex flex-col justify-center rounded border border-border px-4 py-3"
45          >
46            <div className="flex items-center gap-3 text-foreground">
47              <FileIcon className="h-8 w-8 shrink-0 text-muted-foreground" />
48              <div className="min-w-0 flex-1">
49                <div className="flex items-center justify-between text-xs">
50                  <div className="truncate text-sm">
51                    <div className="overflow-hidden text-ellipsis whitespace-nowrap font-medium">
52                      {file.name}
53                    </div>
54                    <div className="text-xs text-muted-foreground">
55                      {formatFileSize(file.size)}
56                    </div>
57                  </div>
58 
59                  <div className="ml-2 flex items-center gap-2">
60                    {status === 'ERROR' && (
61                      <div className="flex items-center text-xs text-destructive">
62                        <AlertCircleIcon className="mr-1 h-4 w-4" />
63                      </div>
64                    )}
65 
66                    {status === 'UPLOADING' && (
67                      <div className="flex flex-col items-end">
68                        {abortController && (
69                          <button
70                            type="button"
71                            className="rounded-md p-0.5 transition-colors duration-200 hover:bg-secondary"
72// … truncated