<div className="flex flex-col items-center gap-4">
<FileTrigger
onSelect={(e) => {
if (e) {
const files = Array.from(e);
const fileName = files[0]?.name;
if (fileName) setFile(fileName);
}
}}
allowsMultiple
>
<Button>
<UploadIcon /> Upload
</Button>
</FileTrigger>
{file && (
<p>
You selected <span className="font-semibold">{file}</span>
</p>
)}
</div>npx shadcn@latest add @dotui/file-triggerUse file triggers to allow users to upload files using any pressable element.
import { Button } from "@/components/ui/button";
import { FileTrigger } from "@/components/ui/file-trigger";<FileTrigger onSelect={(e) => console.log(e)}>
<Button>Upload File</Button>
</FileTrigger>Use the controls below to experiment with different file trigger props and see the live preview and code update.
<FileTrigger>
<Button>Upload File</Button>
</FileTrigger>A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
| Prop | Type | Default | |
|---|---|---|---|
readonly string[] | — | ||
boolean | — | ||
"user" | "environment" | — | ||
ReactNode | — | ||
boolean | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.