Components
Loading preview...
Dropzone is a component that allows you to drag-and-drop files into a container to process them.
@haydenbleasel
npx shadcn@latest add https://21st.dev/r/haydenbleasel/dropzone'use client';
import { useState } from 'react';
import {
Dropzone,
DropzoneContent,
DropzoneEmptyState,
} from '@/components/ui/dropzone';
const Example = () => {
const [files, setFiles] = useState<File[] | undefined>();
const handleDrop = (files: File[]) => {
console.log(files);
setFiles(files);
};
return (
<div className="flex h-screen w-full max-w-[500px] items-center justify-center p-8">
<Dropzone
maxSize={1024 * 1024 * 10}
minSize={1024}
maxFiles={10}
accept={{ 'image/*': [] }}
onDrop={handleDrop}
src={files}
onError={console.error}
>
<DropzoneEmptyState />
<DropzoneContent />
</Dropzone>
</div>
);
}
export { Example };