File Upload with Preview

1'use client';
2 
3import { HelpCircle, Trash2, Upload } from 'lucide-react';
4import { useRef, useState } from 'react';
5import { Button } from '@/components/ui/button';
6import { Card, CardContent } from '@/components/ui/card';
7import { Input } from '@/components/ui/input';
8import { Label } from '@/components/ui/label';
9import {
10  Select,
11  SelectContent,
12  SelectGroup,
13  SelectItem,
14  SelectTrigger,
15  SelectValue,
16} from '@/components/ui/select';
17import {
18  Tooltip,
19  TooltipContent,
20  TooltipProvider,
21  TooltipTrigger,
22} from '@/components/ui/tooltip';
23import { cn } from '@/lib/utils';
24 
25export default function FileUpload01() {
26  const fileInputRef = useRef<HTMLInputElement>(null);
27  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
28  const [fileProgresses, setFileProgresses] = useState<Record<string, number>>(
29    {}
30  );
31 
32  const handleFileSelect = (files: FileList | null) => {
33    if (!files) return;
34 
35    const newFiles = Array.from(files);
36    setUploadedFiles((prev) => [...prev, ...newFiles]);
37 
38    // Simulate upload progress for each file
39    newFiles.forEach((file) => {
40      let progress = 0;
41      const interval = setInterval(() => {
42        progress += Math.random() * 10;
43        if (progress >= 100) {
44          progress = 100;
45          clearInterval(interval);
46        }
47        setFileProgresses((prev) => ({
48          ...prev,
49          [file.name]: Math.min(progress, 100),
50        }));
51      }, 300);
52    });
53  };
54 
55  const handleBoxClick = () => {
56    fileInputRef.current?.click();
57  };
58 
59  const handleDragOver = (e: React.DragEvent) => {
60    e.preventDefault();
61  };
62 
63  const handleDrop = (e: React.DragEvent) => {
64    e.preventDefault();
65    handleFileSelect(e.dataTransfer.files);
66  };
67 
68  const removeFile = (filename: string) => {
69    setUploadedFiles((prev) => prev.filter((file) => file.name !== filename));
70    setFileProgresses((prev) => {
71      const newProgresses = { ...prev };
72      delete newProgresses[filename];
73      return newProgresses;
74    });
75  };
76 
77  return (
78    <div className="flex items-center justify-center p-10">
79      <Card className="mx-auto w-full max-w-lg rounded-lg bg-background p-0 shadow-md">
80        <CardContent className="p-0">
81          <div className="p-6 pb-4">
82            <div className="flex items-start justify-between">
83              <div>
84                <h2 className="text-balance font-medium text-foreground text-lg">
85                  Create a new project
86                </h2>
87// … truncated