Components
Upload Dropzone
Drag-and-drop surface for single- or multi-file uploads with file queue list.
UploadDropzone provides an accessible drag-and-drop file target bound to useUpload.
Preview
Drag and drop files here
Up to 75.0 MB.
Install
Complete UI Setup first — stylesheet and toaster. Then add this component:
import { UploadDropzone } from "@dimah-s3/ui";Usage
"use client";
import { useUpload } from "@dimah-s3/react";
import { UploadDropzone } from "@dimah-s3/ui";
export function FileDropzone() {
const upload = useUpload({
route: "avatar",
});
return <UploadDropzone upload={upload} />;
}Props
import type { UploadDropzoneProps } from "@dimah-s3/ui";Prop
Type
Frequently asked questions
Set status={false} on UploadDropzone, then render UploadStatus
separately:
import { UploadDropzone, UploadStatus } from "@dimah-s3/ui";
export function CustomDropzone() {
const upload = useUpload({ route: "gallery", maxFiles: 5 });
return (
<div className="space-y-4">
<UploadDropzone upload={upload} status={false} />
<UploadStatus upload={upload} />
</div>
);
}Pass React children to UploadDropzone:
<UploadDropzone upload={upload}>
<div className="text-muted-foreground flex flex-col items-center justify-center p-6">
{" "}
<p className="text-sm font-medium">Drop files here</p> {}
<p className="text-xs">Images, PDF, or video</p> {}
</div>{" "}
</UploadDropzone>