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 2.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 AvatarDropzone() {
const upload = useUpload({
route: "avatar",
});
return <UploadDropzone upload={upload} />;
}Props
import type { UploadDropzoneProps } from "@dimah-s3/ui";Prop
Type
Frequently asked questions
Pass status={false} to UploadDropzone and 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="flex flex-col items-center justify-center p-6 text-muted-foreground">
<p className="text-sm font-medium">Drag avatar image here</p>
<p className="text-xs">PNG, JPG or WebP up to 2MB</p>
</div>
</UploadDropzone>