useFileDialog

useFileDialog (파일 선택 다이얼로그)

useFileDialog 훅은 파일 입력 요소 없이 사용자로부터 파일 한 개 이상을 받아올 수 있게 해줘요.

출처: 문서

본문

useFileDialog 훅은 파일 입력 요소 없이 사용자로부터 파일 한 개 이상을 받아올 수 있게 해줘요.

import { Button, Group, List } from '@mantine/core';
import { useFileDialog } from '@mantine/hooks';

function Demo() {
  const fileDialog = useFileDialog();

  const pickedFiles = Array.from(fileDialog.files || []).map((file) => (
    <List.Item key={file.name}>{file.name}</List.Item>
  ));

  return (
    <Group mt="xl" style={{ alignItems: 'flex-start' }}>
      <Button onClick={fileDialog.open}>Pick files</Button>
      {pickedFiles.length > 0 && (
        <Button color="red" variant="light" onClick={fileDialog.reset}>
          Reset
        </Button>
      )}
      {pickedFiles.length > 0 && <List mt="sm">{pickedFiles}</List>}
    </Group>
  );
}

정의 (Definition)

interface UseFileDialogOptions {
  /** Determines whether multiple files are allowed, `true` by default */
  multiple?: boolean;
  /** `accept` attribute of the file input, '*' by default */
  accept?: string;
  /** `capture` attribute of the file input */
  capture?: string;
  /** Determines whether the user can pick a directory instead of file, `false` by default */
  directory?: boolean;
  /** Determines whether the file input state should be reset when the file dialog is opened, `false` by default */
  resetOnOpen?: boolean;
  /** Initial selected files */
  initialFiles?: FileList | File[];
  /** Called when files are selected */
  onChange?: (files: FileList | null) => void;
  /** Called when file dialog is canceled */
  onCancel?: () => void;
}

interface UseFileDialogReturnValue {
  files: FileList | null;
  open: () => void;
  reset: () => void;
}

function useFileDialog(input?: UseFileDialogOptions): UseFileDialogReturnValue;

Exported types

UseFileDialogOptions와 UseFileDialogReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseFileDialogOptions, UseFileDialogReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)