File Upload Multi-File Dropzone

1'use client';
2 
3import { File, Trash } from 'lucide-react';
4import React from 'react';
5import { useDropzone } from 'react-dropzone';
6 
7import { Button } from '@/components/ui/button';
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from '@/components/ui/card';
15import { Input } from '@/components/ui/input';
16import { Label } from '@/components/ui/label';
17import {
18  Select,
19  SelectContent,
20  SelectItem,
21  SelectTrigger,
22  SelectValue,
23} from '@/components/ui/select';
24import { Separator } from '@/components/ui/separator';
25import { cn } from '@/lib/utils';
26 
27export default function FileUpload03() {
28  const [files, setFiles] = React.useState<File[]>([]);
29  const { getRootProps, getInputProps, isDragActive } = useDropzone({
30    onDrop: (acceptedFiles) => setFiles(acceptedFiles),
31  });
32 
33  const filesList = files.map((file) => (
34    <li className="relative" key={file.name}>
35      <Card className="relative p-4 shadow-none">
36        <div className="-translate-y-1/2 absolute top-1/2 right-4">
37          <Button
38            aria-label="Remove file"
39            onClick={() =>
40              setFiles((prevFiles) =>
41                prevFiles.filter((prevFile) => prevFile.name !== file.name)
42              )
43            }
44            size="icon"
45            type="button"
46            variant="ghost"
47          >
48            <Trash aria-hidden={true} className="h-5 w-5" />
49          </Button>
50        </div>
51        <CardContent className="flex items-center space-x-3 p-0">
52          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted">
53            <File aria-hidden={true} className="h-5 w-5 text-foreground" />
54          </span>
55          <div>
56            <p className="text-pretty font-medium text-foreground">
57              {file.name}
58            </p>
59            <p className="mt-0.5 text-pretty text-muted-foreground text-sm">
60              {file.size} bytes
61            </p>
62          </div>
63        </CardContent>
64      </Card>
65    </li>
66  ));
67 
68  return (
69    <div className="flex items-center justify-center p-10">
70      <Card className="shadow-none sm:mx-auto sm:max-w-xl">
71        <CardHeader>
72          <CardTitle>Set up your first cloud storage</CardTitle>
73          <CardDescription>
74            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
75          </CardDescription>
76        </CardHeader>
77        <CardContent>
78          <form action="#" method="post">
79// … truncated