āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/nic13gamer/better-upload/components/upload-button ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
import { UploadButtonDemo } from '@/components/templates/upload-button-demo';
<Tabs items={['CLI', 'Manual']}>
<Tab value="CLI">npx shadcn@latest add @better-upload/upload-button
Install the following dependencies:
npm i lucide-react
Also add the shadcn/ui button component to your project. As the upload button is built on top of it.
</Step> <Step>Copy and paste the following code into your project.
<include cwd lang="tsx" meta="title='components/ui/upload-button.tsx'"> ./components/templates/upload-button.txt </include> </Step> <Step>Update the import paths to match your project setup.
</Step> </Steps> </Tab> </Tabs>The <UploadButton /> should be used with the useUploadFile hook.
'use client';
import { useUploadFile } from 'better-upload/client';
import { UploadButton } from '@/components/ui/upload-button';
export function Uploader() {
const { control } = useUploadFile({
route: 'demo',
});
return <UploadButton control={control} accept="image/*" />;
}
The button will open a file picker dialog when clicked, and upload the selected file to the desired route.
<TypeTable type={{ control: { type: 'object', description: 'Control object returned by the useUploadFile hook.', required: true, }, accept: { type: 'string', description: 'The file types that the input should accept.', }, 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.', }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā