File Trigger

<FileTrigger>
  <Button>Upload File</Button>
</FileTrigger>

Installation

npx shadcn@latest add @dotui/file-trigger

Usage

Use file triggers to allow users to upload files using any pressable element.

import { Button } from '@/components/ui/button'
import { FileTrigger } from '@/components/ui/file-trigger'

<FileTrigger onSelect={(e) => console.log(e)}>
  <Button>Upload File</Button>
</FileTrigger>

File selection

onSelect receives a FileList (or null), so wrap it in Array.from to work with the files. Restrict what users can pick with acceptedFileTypes, allow multiple with allowsMultiple, pick whole folders with acceptDirectory, or open a device camera with defaultCamera (user or environment).

<FileTrigger
  acceptedFileTypes={['image/*']}
  allowsMultiple
  onSelect={(e) => {
    if (e) console.log(Array.from(e).map((file) => file.name))
  }}
>
  <Button>Upload images</Button>
</FileTrigger>

Examples

API Reference