FileInput

A pre-styled button that opens the OS file dialog and hands you the selected absolute paths. It wraps dialog.openFile() — use the dialog API directly if you need full control over the trigger UI.

Requires the dialog capability:

{ "capabilities": { "dialog": true } }

Usage

import { FileInput } from '@glyx-dev/react'
 
<FileInput
  label="Choose images…"
  accept=".png,.jpg,.webp"
  multiple
  onFilesSelected={(paths) => {
    // paths: string[] of absolute file paths
    setImages(paths)
  }}
/>

Props

File-type filtering

accept constrains what the OS dialog lets the user pick. Two forms:

// Extension shorthand — one filter group with those extensions
<FileInput accept=".png,.jpg,.webp" onFilesSelected={...} />
 
// Named filter groups — shown as the dropdown labels in the OS dialog
<FileInput
  accept={[
    { name: 'Images', extensions: ['png', 'jpg', 'webp'] },
    { name: 'Documents', extensions: ['pdf', 'docx'] },
  ]}
  onFilesSelected={...}
/>

The named form maps directly to dialog.openFile({ filters }), so anything the native dialog supports works here. Omit accept to allow all files.

Notes

• The dialog is the native OS picker (not a custom overlay), so it follows platform conventions automatically.
• Selection is path-based: to read the file contents, pass the path to fs.readFile() — which needs a matching fs.read capability.

See also

• dialog — openFile / saveFile / openFolder
• fs — reading the selected files