Upload Button

Demo

Installation

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

Usage

The <UploadButton /> should be used inside a client component.

'use client';
 
import { UploadButton } from '@/components/ui/upload-button';

<UploadButton
  route="demo"
  accept="image/*"
  onBeforeUpload={({ file }) => {
    // rename the file
    return new File([file], 'renamed-' + file.name, { type: file.type });
  }}
  onUploadBegin={({ file, metadata }) => {
    console.log('Upload begin');
  }}
  onUploadProgress={({ file, progress }) => {
    console.log(`Upload progress: ${progress * 100}%`);
  }}
  onUploadComplete={({ file, metadata }) => {
    console.log('Upload complete');
  }}
  onUploadError={(error) => {
    console.log(error.message);
  }}
  onUploadSettled={() => {
    console.log('Upload settled');
  }}
/>

If your upload route handler is not located at /api/upload, modify the api prop to match your path.

The button will open a file picker dialog when clicked, and upload the selected file to the desired route.

Props

Prop	Type	Default
`api`	`string`	`/api/upload`
`route`	`string`	-
`accept`	`string \| undefined`	-
`metadata`	`Record<string, unknown> \| undefined`	-
`onBeforeUpload`	`function \| undefined`	-
`onUploadBegin`	`function \| undefined`	-
`onUploadProgress`	`function \| undefined`	-
`onUploadComplete`	`function \| undefined`	-
`onUploadError`	`function \| undefined`	-
`onUploadSettled`	`function \| undefined`	-

Demo

Installation

Usage

Props

On this page