useFileDialog

Hook for handling file selection via <input type="file">. Returns a handler that validates the chosen files' types against an accept list and delivers the valid list in onFilesSelect, or notifies via onUnsupportedFile.

Always clears the input value at the end, allowing the same file to be picked twice in a row.

When to use

✅ Use when…	🚫 Avoid when…
In uploaders triggered by a button click (paired with a hidden input). As a companion to `useDrag` to offer both selection modes (drag and click).	For drag-and-drop selection (use `useDrag`).

Signature

const { getFiles } = useFileDialog({
  accept?: string[];
  single?: boolean;
  onFilesSelect: (f: File[]) => void;
  onUnsupportedFile?: (f: File) => void;
});

Example

import { useFileDialog } from '@apollion-dsi/core/hooks';
 
function FilePicker() {
  const { getFiles } = useFileDialog({
    accept: ['image/*'],
    onFilesSelect: (files) => console.log(files),
    onUnsupportedFile: (file) => alert(`Invalid type: ${file.name}`),
  });
 
  return <input type="file" multiple onChange={getFiles} />;
}

useFileDialog

When to use

Signature

Example

See also