useFileDialog

Hook to handle file input

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useFileDialog } from '@siberiacancode/reactuse';

Usage

const { values, open, reset } = useFileDialog((value) => console.log(value));
// or
const { values, open, reset } = useFileDialog({ accept: 'image/*' });

Demo

source

Api

Parameters

Name	Type	Default	Note
callback	(value: FileList | null) => void	-	The callback to execute when a file is selected
options.multiple?	boolean	true	Whether multiple files can be selected
options.accept?	string	'*'	The accepted file types
options.reset?	boolean	false	Whether the input should be reset when the callback is called
options.capture?	string	-	The capture value

Returns

UseFileDialogReturn

Parameters

Name	Type	Default	Note
options.multiple?	boolean	true	Whether multiple files can be selected
options.accept?	string	'*'	The accepted file types
options.reset?	boolean	false	Whether the input should be reset when the callback is called
options.capture?	string	-	The capture value

Returns

UseFileDialogReturn

Type declaration

import type { ComponentProps } from 'react';

export interface UseFileDialogOptions extends Pick<ComponentProps<'input'>, 'accept' | 'multiple'> {
  /** The capture value */
  capture?: string;
  /** The reset value */
  reset?: boolean;
}

export interface UseFileDialogReturn {
  /** The selected files */
  value: FileList | null;
  /** The open function */
  open: (openParams?: UseFileDialogOptions) => void;
  /** The reset function */
  reset: () => void;
}

export interface UseFileDialog {
  (
    callback?: (value: FileList | null) => void,
    options?: UseFileDialogOptions
  ): UseFileDialogReturn;

  (options?: UseFileDialogOptions, callback?: never): UseFileDialogReturn;
}

Source

Source • Demo

Contributors

D

debabin