File Trigger

<FileTrigger>
  <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>

Installation

npx dotui-cli@latest add file-trigger

Anatomy

A FileTrigger wraps around a pressable child such as a button, and includes a visually hidden input element that allows the user to select files from their device.

import { Button } from "@/components/core/button";
import { FileTrigger } from "@/components/core/file-trigger";
 
<FileTrigger>
  <Button>Upload</Button>
</FileTrigger>;

Accepted file types

By default, the file trigger will accept any file type. To support only certain file types, pass an array of the mime type of files via the acceptedFileTypes prop.

<FileTrigger acceptedFileTypes={["image/*"]}>
  <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>

Multiple files

A file trigger can accept multiple files by passsing the allowsMultiple prop.

<FileTrigger allowMultiple>
  <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>

Directory selection

To enable selecting directories instead of files, use the acceptDirectory property.
This reflects the webkitdirectory HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser.

<FileTrigger acceptDirectory>
  <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>

Media capture

To specify the media capture mechanism to capture media on the spot, pass user for the user-facing camera or environment for the outward-facing camera via the defaultCamera prop.
This behavior only works on mobile devices. On desktop devices, it will open the file system like normal. Read more about capture.

<FileTrigger defaultCamera="environment">
  <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>

API Reference

Accessibility

Keyboard interactions