File Trigger
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";Live Editor
Examples
Basic Usage
Simply wrap a Button component with FileTrigger to create a file upload button.
Multiple File Selection
Enable users to select multiple files by setting the allowsMultiple prop to true.
Accepted File Types
Restrict the types of files that can be selected by specifying the acceptedFileTypes prop.
Directory Selection
Allow users to select directories instead of files by setting the acceptDirectory prop to true.
Handling Selected Files
Use the onSelect callback to process files after they’ve been selected.
Props
Visit the Documentation Site for the full list of props.
| Name | Type | Default | Description |
|---|---|---|---|
| acceptDirectory | boolean | - | Enables the selection of directories instead of individual files. |
| acceptedFileTypes | readonly string[] | - | Specifies what mime type of files are allowed. |
| allowsMultiple | boolean | - | Whether multiple files can be selected. |
| children | ReactNode | - | The children of the component. |
| defaultCamera | "user" | "environment" | - | Specifies the use of a media capture mechanism to capture the media on the spot. |
| dir | string | - | - |
| hidden | boolean | - | - |
| inert | boolean | - | - |
| lang | string | - | - |
| onAnimationEnd | AnimationEventHandler<HTMLInputElement> | - | - |
| onAnimationEndCapture | AnimationEventHandler<HTMLInputElement> | - | - |
| onAnimationIteration | AnimationEventHandler<HTMLInputElement> | - | - |
| onAnimationIterationCapture | AnimationEventHandler<HTMLInputElement> | - | - |
| onAnimationStart | AnimationEventHandler<HTMLInputElement> | - | - |
| onAnimationStartCapture | AnimationEventHandler<HTMLInputElement> | - | - |
| onAuxClick | MouseEventHandler<HTMLInputElement> | - | - |
| onAuxClickCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onClick | MouseEventHandler<HTMLInputElement> | - | - |
| onClickCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onContextMenu | MouseEventHandler<HTMLInputElement> | - | - |
| onContextMenuCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onDoubleClick | MouseEventHandler<HTMLInputElement> | - | - |
| onDoubleClickCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onGotPointerCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onGotPointerCaptureCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onLostPointerCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onLostPointerCaptureCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onMouseDown | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseDownCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseEnter | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseLeave | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseMove | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseMoveCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseOut | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseOutCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseOver | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseOverCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseUp | MouseEventHandler<HTMLInputElement> | - | - |
| onMouseUpCapture | MouseEventHandler<HTMLInputElement> | - | - |
| onPointerCancel | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerCancelCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerDown | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerDownCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerEnter | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerLeave | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerMove | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerMoveCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerOut | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerOutCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerOver | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerOverCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerUp | PointerEventHandler<HTMLInputElement> | - | - |
| onPointerUpCapture | PointerEventHandler<HTMLInputElement> | - | - |
| onScroll | UIEventHandler<HTMLInputElement> | - | - |
| onScrollCapture | UIEventHandler<HTMLInputElement> | - | - |
| onSelect | (files: FileList) => void | - | Handler when a user selects a file. |
| onTouchCancel | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchCancelCapture | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchEnd | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchEndCapture | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchMove | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchMoveCapture | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchStart | TouchEventHandler<HTMLInputElement> | - | - |
| onTouchStartCapture | TouchEventHandler<HTMLInputElement> | - | - |
| onTransitionCancel | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionCancelCapture | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionEnd | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionEndCapture | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionRun | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionRunCapture | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionStart | TransitionEventHandler<HTMLInputElement> | - | - |
| onTransitionStartCapture | TransitionEventHandler<HTMLInputElement> | - | - |
| onWheel | WheelEventHandler<HTMLInputElement> | - | - |
| onWheelCapture | WheelEventHandler<HTMLInputElement> | - | - |
| translate | "yes" | "no" | - | - |