Components
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.
Loading preview...
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://picsum.photos/1000/800?grayscale&random=1",
},
{
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>
);
}