File Trigger

A file trigger allows a user to access the file system with any pressable element.

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

Installation

Before adding components, init your project with your design system from the Studio.

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/file-trigger

Usage

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

Basic Upload

Profile Picture Upload

Document Upload

Multi-Image Upload

API Reference

A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.

Prop	Type	Default
	`boolean`	`—`
	`readonly string[]`	`—`
	`boolean`	`—`
	`ReactNode`	`—`
	`"environment" \| "user"`	`—`

Last updated on 10/18/2026