useFileDialog

Category

Browser

Export Size

746 B

Last Changed

5 days ago

Open file dialog with ease

Demo

Usage

import { useFileDialog } from '@reause/core'
import { useListener } from '@reause/shared'

const {
  files,
  open,
  reset,
  onChange,
  onCancel,
} = useFileDialog({
  accept: 'image/*', // Set to accept only image files
  directory: true, // Select directories instead of files if set true
})

useListener(onChange, (files) => {
  /** do something with files */
})

useListener(onCancel, () => {
  /** do something on cancel */
})

With buttons:

import { useFileDialog } from '@reause/core'

function Component() {
  const { files, open, reset } = useFileDialog()

  return (
    <div>
      <button type="button" onClick={() => open()}>
        Choose files
      </button>
      <button type="button" disabled={!files} onClick={() => reset()}>
        Reset
      </button>
    </div>
  )
}

Type Declarations

export interface UseFileDialogOptions {
    document?: Document | null;
    multiple?: boolean;
    accept?: string;
    capture?: string;
    reset?: boolean;
    directory?: boolean;
    initialFiles?: Array<File> | FileList;
    input?: RefObject<HTMLInputElement | null>;
}

export interface UseFileDialogReturn {
    files: FileList | null;
    open: (localOptions?: Partial<UseFileDialogOptions>) => void;
    reset: () => void;
    onChange: (fn: (files: FileList | null) => void) => () => void;
    onCancel: (fn: () => void) => () => void;
}

export function useFileDialog(options?: UseFileDialogOptions): UseFileDialogReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

534c2 - refactor(shared)!: return the off function from listener registrars

v0.1.0 on

712bd - fix(core): resolve useFileDialog audit findings (#558)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)