File Upload

1const [files, setFiles] = useState<File[]>([]);
2
3<Dropzone onFilesDropped={setFiles}>
4  <div className="flex flex-col items-center gap-2">
5    <Upload className="size-8 text-muted-foreground" />
6    <p className="text-sm font-mono">
7      Drag and drop files here, or click to select
8    </p>
9    <p className="text-xs text-muted-foreground font-mono">
10      Supports any file type
11    </p>
12  </div>
13</Dropzone>
14
15{files.length > 0 && (
16  <div className="border rounded-none p-4 space-y-2">
17    <p className="text-xs font-semibold">[SELECTED FILES]:</p>
18    {files.map((file, i) => (
19      <div key={i} className="flex items-center gap-2 text-xs">
20        <FileText className="size-4" />
21        <span>{file.name}</span>
22        <span className="text-muted-foreground">
23          ({(file.size / 1024).toFixed(1)} KB)
24        </span>
25      </div>
26    ))}
27  </div>
28)}