/reactuse

useFileDialog

Opens a file picker and returns selected files.

Usage

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

const dialog = useFileDialog();

Example

const dialog = useFileDialog({ accept: "image/*" });

return (
  <button onClick={() => dialog.open()}>
    Selected: {dialog.value?.length ?? 0}
  </button>
);

multiple:

const dialog = useFileDialog({ multiple: false });

accept:

const dialog = useFileDialog({ accept: "image/*" });

reset:

const dialog = useFileDialog({ reset: true });

capture:

const dialog = useFileDialog({ capture: "environment" });

Type Declarations

import type { ComponentProps } from "react";

export interface UseFileDialogOptions
  extends Pick<ComponentProps<"input">, "accept" | "multiple"> {
  capture?: string;
  reset?: boolean;
}
export interface UseFileDialogReturn {
  value: FileList | null;
  open: (openParams?: UseFileDialogOptions) => void;
  reset: () => void;
}
export interface UseFileDialog {
  (
    callback?: (value: FileList | null) => void,
    options?: UseFileDialogOptions
  ): UseFileDialogReturn;
  (options?: UseFileDialogOptions, callback?: never): UseFileDialogReturn;
}
export declare const useFileDialog: UseFileDialog;