Upload Button

Demo

Installation

npx shadcn@latest add "https://better-upload.js.org/r/upload-button.json"

Usage

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.

Props

Prop	Type	Default
`control`	`object`	-
`metadata?`	`Record<string, unknown> \| undefined`	-
`accept?`	`string \| undefined`	-
`uploadOverride?`	`function \| undefined`	-

Demo

Installation

Usage

Props

On this page