File Upload Drag & Drop

1'use client';
2 
3import { File, FileSpreadsheet, X } from 'lucide-react';
4import { type ChangeEvent, type DragEvent, useRef, useState } from 'react';
5import { toast } from 'sonner';
6 
7import { Button } from '@/components/ui/button';
8import { Card } from '@/components/ui/card';
9import { Progress } from '@/components/ui/progress';
10 
11export default function FileUpload04() {
12  const [uploadState, setUploadState] = useState<{
13    file: File | null;
14    progress: number;
15    uploading: boolean;
16  }>({
17    file: null,
18    progress: 0,
19    uploading: false,
20  });
21  const [showDummy, setShowDummy] = useState(true);
22  const fileInputRef = useRef<HTMLInputElement>(null);
23 
24  const validFileTypes = [
25    'text/csv',
26    'application/vnd.ms-excel',
27    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
28  ];
29 
30  const handleFile = (file: File | undefined) => {
31    if (!file) return;
32 
33    if (validFileTypes.includes(file.type)) {
34      setUploadState({ file, progress: 0, uploading: true });
35 
36      const interval = setInterval(() => {
37        setUploadState((prev) => {
38          const newProgress = prev.progress + 5;
39          if (newProgress >= 100) {
40            clearInterval(interval);
41            return { ...prev, progress: 100, uploading: false };
42          }
43          return { ...prev, progress: newProgress };
44        });
45      }, 200);
46    } else {
47      toast.error('Please upload a CSV, XLSX, or XLS file.', {
48        position: 'bottom-right',
49        duration: 3000,
50      });
51    }
52  };
53 
54  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
55    handleFile(event.target.files?.[0]);
56  };
57 
58  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
59    event.preventDefault();
60    handleFile(event.dataTransfer.files?.[0]);
61  };
62 
63  const resetFile = () => {
64    setUploadState({ file: null, progress: 0, uploading: false });
65    if (fileInputRef.current) {
66      fileInputRef.current.value = '';
67    }
68  };
69 
70  const getFileIcon = () => {
71    if (!uploadState.file) return <File />;
72 
73    const fileExt = uploadState.file.name.split('.').pop()?.toLowerCase() || '';
74    return ['csv', 'xlsx', 'xls'].includes(fileExt) ? (
75      <FileSpreadsheet className="h-5 w-5 text-foreground" />
76    ) : (
77      <File className="h-5 w-5 text-foreground" />
78    );
79  };
80 
81  const formatFileSize = (bytes: number) => {
82    if (bytes === 0) return '0 Bytes';
83    const k = 1024;
84    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
85// … truncated