File Triggers are your go-to for grabbing files from the file system, acting like a digital fishing rod to hook up goodies from local or cloud storage.

FileTrigger

Basic

Basic usage of a FileTrigger.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/file-trigger

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

This component comes packed with several components to enhance functionality and provide a seamless experience.

button

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install react-aria-components @heroicons/react

Anatomy

import { FileTrigger } from "@/components/ui/file-trigger"

<FileTrigger />

Folder

A FileTrigger that allows users to select a folder from the file system.

Multiple

A FileTrigger that enables users to select multiple files.

Camera

A FileTrigger that lets users capture images using their device's camera.

Avatar

A FileTrigger that allows users to select an avatar from their file system. It integrates components like avatar and drop-zone, enabling users to either drag and drop or manually select a file.

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

This component comes packed with several components to enhance functionality and provide a seamless experience.

avatar drop zone

This how you can use the FileTrigger combined with an Avatar component.

Pending

A FileTrigger can indicate a pending state using the isPending prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.