About
A drag-and-drop dropzone to upload multiple files to a storage provider, with per-file previews and upload progress via a presigned upload URL.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Upload Multiple Files to your project and fits it to your theme.
Code
How Upload Multiple Files is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import UploadMultipleFiles from "@/components/ui/upload-multiple-files";
const initialFiles = [
{
id: "intro.zip-1744638436563-8u5xuls",
name: "intro.zip",
size: 252873,
type: "application/zip",
url: "https://example.com/intro.zip",
},
{
id: "image-01-123456789",
name: "image-01.jpg",
size: 1528737,
type: "image/jpeg",
url: "https://cdn.21st.dev/assets/mirror/8c/8cd15bf4cc542bae86dba8441c408e8cc77f82f75df28851fd76265da85cca43.jpg",
},
{
id: "audio-123456789",
name: "audio.mp3",
size: 1528737,
type: "audio/mpeg",
url: "https://example.com/audio.mp3",
},
];
export default function UploadMultipleFilesDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-md">
<UploadMultipleFiles initialFiles={initialFiles} />
</div>
</div>
);
}