FileTrigger

FileTrigger opens the native file picker from any custom trigger and forwards the chosen files to your code. It wraps a Button (or any pressable) and reports the selection through onSelect — no styling of the OS dialog required.

Import

import { FileTrigger, Button } from '@proyecto-viviana/solid-spectrum';

Basic

Wrap a trigger and handle onSelect. The callback receives a FileList (or null if the dialog was dismissed).

no file selected

<FileTrigger
  onSelect={(list: FileList | null) =>
    setFiles(
      list && list.length > 0
        ? Array.from(list).map((f) => f.name).join(", ")
        : "no file selected"
    )
  }
>
  <Button variant="secondary">Choose file…</Button>
</FileTrigger>

Filtered and multiple

Restrict the picker with acceptedFileTypes and allow more than one file with allowsMultiple.

<FileTrigger
  acceptedFileTypes={["image/png", "image/jpeg"]}
  allowsMultiple
  onSelect={(list) => { /* … */ }}
>
  <Button variant="secondary">Upload images</Button>
</FileTrigger>

Props

Prop	Type	Default	Description
`onSelect`	(files: FileList \| null) => void	—	Handler called with the chosen files, or null if the dialog was cancelled
`acceptedFileTypes`	ReadonlyArray<string>	—	MIME types or extensions the picker restricts selection to
`allowsMultiple`	boolean	`false`	Whether more than one file can be selected
`acceptDirectory`	boolean	`false`	Whether whole directories can be selected instead of files
`children`	JSX.Element	—	The trigger element that opens the file picker

Accessibility

The trigger keeps its own semantics — a Button remains a button in the tab order
The native file input is visually hidden but reachable through the trigger
Activating the trigger with Enter or Space opens the OS file dialog
File-type and multiple-selection constraints are enforced by the browser dialog