āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/nic13gamer/better-upload/components/upload-dropzone ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
import { UploadDropzoneDemo } from '@/components/templates/upload-dropzone-demo';
<Tabs items={['CLI', 'Manual']}>
<Tab value="CLI">npx shadcn@latest add @better-upload/upload-dropzone
Install the following dependencies:
npm i lucide-react react-dropzone
Make sure to have shadcn/ui set up in your project.
</Step> <Step>Copy and paste the following code into your project.
<include cwd lang="tsx" meta="title='components/ui/upload-dropzone.tsx'"> ./components/templates/upload-dropzone.txt </include> </Step> <Step>Update the import paths to match your project setup.
</Step> </Steps> </Tab> </Tabs>The <UploadDropzone /> should be used with the useUploadFiles hook.
'use client';
import { useUploadFiles } from 'better-upload/client';
import { UploadDropzone } from '@/components/ui/upload-dropzone';
export function Uploader() {
const { control } = useUploadFiles({
route: 'demo',
});
return <UploadDropzone control={control} accept="image/*" />;
}
When clicked, the dropzone will open a file picker dialog. When selected or dropped, the files will be uploaded to the desired route.
You can customize the description shown in the dropzone. You can pass a string, or an object with the following properties:
maxFiles: The maximum number of files that can be uploaded.maxFileSize: The maximum size of the files that can be uploaded, use a formatted string (e.g. 10MB).fileTypes: The file types that can be uploaded.<UploadDropzone
control={control}
accept="image/*"
description={{
maxFiles: 4,
maxFileSize: '2MB',
fileTypes: 'JPEG, PNG, GIF',
}}
/>
<TypeTable type={{ control: { type: 'object', description: 'Control object returned by the useUploadFiles hook.', required: true, }, accept: { type: 'string', description: 'The file types that the input should accept.', }, description: { type: 'string | object', description: 'The description to show in the dropzone. Object for max files, max file size, and file types. You can also return a raw string.', }, metadata: { type: 'Record<string, unknown>', description: 'Metadata to send to your server on upload. Needs to be JSON serializable.', }, uploadOverride: { type: 'function', description: 'Override the default upload function. For example, set files in an array, and upload them after form submission.', }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā