useFileDialog

v0.0.14testeddemo

Open a native file dialog programmatically and reactively track the selected files.

Examples

const { files, open, onChange } = useFileDialog({ accept: 'image/*' });
onChange((selected) => console.log(selected));
open();

// Override options for a single call
const { open } = useFileDialog();
open({ multiple: false, accept: '.pdf' });

Loading demo…

export function useFileDialog(options: UseFileDialogOptions ={ ... }

Parameter	Type	Default	Description
`options`?	`UseFileDialogOptions`	`{}`	Options

UseFileDialogReturnfiles, open, reset, onChange, and onCancel

Property	Type	Default	Description
`files`	`ComputedRef<FileList \| null>`	—	The currently selected files, or `null` when none are selected
`open`	`(localOptions?: Partial<UseFileDialogOptions>) => void`	—	Open the file dialog, optionally overriding options for this call only
`reset`	`() => void`	—	Clear the current selection
`onChange`	`FileDialogEventHookOn<FileList \| null>`	—	Register a callback fired when the selection changes
`onCancel`	`FileDialogEventHookOn`	—	Register a callback fired when the dialog is dismissed without a selection