## Import

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

## Live Editor

```jsx
<FileTrigger>
  <Button>Upload File</Button>
</FileTrigger>
```

## Examples

### Basic Usage

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

```jsx
<FileTrigger>
  <Button>Upload File</Button>
</FileTrigger>
```

### Multiple File Selection

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

```jsx
<FileTrigger allowsMultiple>
  <Button>Upload Multiple Files</Button>
</FileTrigger>
```

### Accepted File Types

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

```jsx
<FileTrigger acceptedFileTypes={["image/png", "image/jpeg"]}>
  <Button>Upload Images Only</Button>
</FileTrigger>
```

### Directory Selection

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

```jsx
<FileTrigger acceptDirectory>
  <Button>Select Directory</Button>
</FileTrigger>
```

### Handling Selected Files

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

```jsx
function ControlledExample() {
  const [files, setFiles] = React.useState([]);

  function formatBytes(bytes, decimals = 2) {
    if (!+bytes) return "0 Bytes";
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = [
      "Bytes",
      "KiB",
      "MiB",
      "GiB",
      "TiB",
      "PiB",
      "EiB",
      "ZiB",
      "YiB",
    ];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
  }

  return (
    <div>
      <FileTrigger
        onSelect={(e) => {
          const selectedFiles = Array.from(e ? e : []);
          setFiles(selectedFiles);
        }}
      >
        <Button>Upload File</Button>
      </FileTrigger>

      {files.length > 0 && (
        <div style={{ marginTop: "16px" }}>
          <h3>Selected Files:</h3>
          <ul>
            {files.map((file, index) => (
              <li key={index}>
                {file.name} - {formatBytes(file.size)}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}
```

## Props

### FileTrigger

| 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"` | - | - |