Dropzone
The Dropzone component provides a user-friendly drag-and-drop interface for file uploads that integrates seamlessly with the UploaderProvider.
If you are installing the other dropzone components via the CLI, this component will be installed automatically. You can skip the following steps.
Installation
npx shadcn@latest add https://edgestore.dev/r/dropzone.jsonUsage
This section provides a guide on how to use the Dropzone component with the UploaderProvider.
Basic Usage
The Dropzone component must be used within an UploaderProvider.
import { Dropzone } from '@/components/ui/dropzone';
import { UploaderProvider } from '@/components/ui/uploader-provider';
import * as React from 'react';
export default function DropzoneExample() {
const { edgestore } = useEdgeStore();
const uploadFn: UploadFn = React.useCallback(
async ({ file, onProgressChange, signal }) => {
const res = await edgestore.publicFiles.upload({
file,
signal,
onProgressChange,
});
// you can run some server action or api here
// to add the necessary data to your database
console.log(res);
return res;
},
[edgestore],
);
return (
<UploaderProvider uploadFn={uploadFn} autoUpload>
<Dropzone
dropzoneOptions={{
maxFiles: 5,
maxSize: 1024 * 1024 * 2, // 2MB
accept: {
'image/*': ['.jpeg', '.jpg', '.png'],
},
}}
/>
{/* You can create a component that uses the provider context */}
{/* (from the `useUploader` hook) to show a custom file list here */}
</UploaderProvider>
);
}