FileSelectButton

FileSelectButton combines a hidden <input type="file"> with a visible Button. Before a file is selected it renders the button; once a file is chosen it switches to a row showing the file name alongside a clear icon button. The component extends all props from Button (except onClick), so you can fully customise its appearance.

Use it in forms where users need to attach a single file — such as uploading a profile picture, an invoice PDF, or a CSV for import.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onFileSelect | (file: File) => void | Yes | — | Callback fired with the selected File object when the user picks a file. | | onFileClear | () => void | Yes | — | Callback fired when the user clears the selected file. | | title | string | Yes | — | Label for the button (inherited from Button). | | accept | string | No | — | MIME types or file extensions accepted by the file input (e.g. "image/*", ".pdf,.csv"). | | selectedFileContainerStyle | React.CSSProperties | No | — | Inline styles applied to the container shown after a file is selected. | | selectedFileNameStyle | React.CSSProperties | No | — | Inline styles applied to the file name text. | | clearIcon | string | No | "close" | Icon identifier for the clear button. | | clearIconColor | string | No | themeColors.text | Color of the clear icon. | | clearIconSize | number | No | — | Size of the clear icon in pixels. |

In addition, FileSelectButton accepts all props from Button except onClick (e.g. color, type, size, startIcon, style, etc.).

Usage

Basic

import FileSelectButton from '@/components/buttons/FileSelectButton';

export default function Example() {
  return (
    <FileSelectButton
      title="Select File"
      onFileSelect={(file) => console.log('Selected:', file.name)}
      onFileClear={() => console.log('Cleared')}
    />
  );
}

Restricted to images

import FileSelectButton from '@/components/buttons/FileSelectButton';

export default function Example() {
  return (
    <FileSelectButton
      title="Upload Photo"
      accept="image/*"
      startIcon="image"
      onFileSelect={(file) => console.log(file)}
      onFileClear={() => {}}
      size="sm"
      type="outline"
    />
  );
}

CSV import

import FileSelectButton from '@/components/buttons/FileSelectButton';

export default function ImportForm() {
  const handleFile = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => console.log(e.target?.result);
    reader.readAsText(file);
  };

  return (
    <FileSelectButton
      title="Choose CSV"
      accept=".csv"
      onFileSelect={handleFile}
      onFileClear={() => console.log('cleared')}
    />
  );
}