<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>pnpm dlx 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.
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 | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(FileTrigger)>
<Dynamic(Button)>Upload File</Dynamic(Button)>
</Dynamic(FileTrigger)>