File Trigger

Copy for LLM

The FileTrigger component provides a way to trigger file selection dialogs, allowing users to upload files or select directories.

Import

import { FileTrigger } from "@cfa/react-core";

FileTrigger wraps a visible pressable trigger, usually a Button, to open the native file picker while keeping full control of trigger styling.

Use clear action text on the trigger, such as Choose file, Select files, or Upload document. Use plural wording when multiple selection is allowed.
Put file type and size limits in supporting text when needed, such as PDF or JPG up to 10MB.
Use a Button trigger for primary upload actions. Use Link-style underlined text for inline attach flows, such as Attach files.
Pair with DropZone for drag-and-drop. Keep FileTrigger as the click-to-select path beside the drop area.
Follow selection with Progress Bar or status updates when upload progress matters.
Constrain allowed file types with the accept attribute. Do not rely on JavaScript validation alone.

Using FileTrigger when native file input styling is enough and no custom trigger is needed.
Using FileTrigger for non-file actions. Use Button or Link directly.
Using FileTrigger as the only upload path when drag-and-drop is supported. Keyboard and assistive-tech people cannot drag.

Simply wrap a Button component with FileTrigger to create a file upload button.

Enable users to select multiple files by setting the allowsMultiple prop to true.

Restrict the types of files that can be selected by specifying the acceptedFileTypes prop.

Allow users to select directories instead of files by setting the acceptDirectory prop to true.

Use the onSelect callback to process files after they’ve been selected.