File Trigger

Select files, folders, or capture from camera with consistent button semantics.

"use client"

import { FileTrigger } from "@/components/ui/preskok-ui/file-trigger"

export function FileTriggerPreskokDemo() {
  return (
    <div className="flex items-center gap-3">
      <FileTrigger onSelect={() => {}}>Upload file</FileTrigger>
      <FileTrigger allowsMultiple onSelect={() => {}}>
        Upload multiple
      </FileTrigger>
    </div>
  )
}

Installation


pnpm
npm
yarn
bun
pnpm dlx @preskok-org/ui@latest add file-trigger

Usage

import { FileTrigger } from "@/registry/preskok/ui/preskok-ui/file-trigger"
 
export function Example() {
  return <FileTrigger onSelect={() => {}}>Upload</FileTrigger>
}

Props

acceptDirectory: boolean — Allow selecting a folder.
allowsMultiple: boolean — Select multiple files.
defaultCamera: boolean — Open camera when supported.
isPending: boolean — Shows a spinner and disables interactions.
Inherits all react-aria-components FileTrigger props.

Toggle Group Select

On This Page

Installation Usage Props