FileButton

FileButton (파일 선택 버튼)

FileButton 컴포넌트는 버튼 클릭으로 파일 선택기(file picker)를 여는 컴포넌트예요. children으로 함수를 받아 버튼 props를 전달하는 방식으로 사용해요.

출처: 문서

본문

FileButton은 파일 선택기를 여는 버튼을 만드는 데 사용해요. children은 함수이며, 해당 함수가 반환하는 요소에 파일 선택 props가 전달돼요.

import { useState } from 'react';
import { FileButton, Button, Group, Text } from '@mantine/core';

function Demo() {
  const [file, setFile] = useState<File | null>(null);
  return (
    <>
      <Group justify="center">
        <FileButton onChange={setFile} accept="image/png,image/jpeg">
          {(props) => <Button {...props}>Upload image</Button>}
        </FileButton>
      </Group>

      {file && (
        <Text size="sm" ta="center" mt="sm">
          Picked file: {file.name}
        </Text>
      )}
    </>
  );
}

여러 파일 (Multiple files)

multiple prop을 설정하면 여러 파일을 선택할 수 있어요.

import { useState } from 'react';
import { FileButton, Button, Group, Text } from '@mantine/core';

function Demo() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <>
      <Group justify="center">
        <FileButton onChange={setFiles} accept="image/png,image/jpeg" multiple>
          {(props) => <Button {...props}>Upload image</Button>}
        </FileButton>
      </Group>

      {files.length > 0 && (
        <Text size="sm" mt="sm">
          Picked files:
        </Text>
      )}
      <ul>
        {files.map((file, index) => (
          <li key={index}>{file.name}</li>
        ))}
      </ul>
    </>
  );
}

파일 초기화 (Reset file)

input type file은 제어할 수 없기 때문에 숨겨진 input 요소에 이전 값이 남는 문제가 있을 수 있어요. 이를 해결하려면 resetRef를 사용해요. 사용자 선택이 초기화되었을 때 resetRef를 호출해요.

import { useState, useRef } from 'react';
import { FileButton, Button, Group, Text } from '@mantine/core';

function Demo() {
  const [file, setFile] = useState<File | null>(null);
  const resetRef = useRef<() => void>(null);

  const clearFile = () => {
    setFile(null);
    resetRef.current?.();
  };

  return (
    <>
      <Group justify="center">
        <FileButton resetRef={resetRef} onChange={setFile} accept="image/png,image/jpeg">
          {(props) => <Button {...props}>Upload image</Button>}
        </FileButton>
        <Button disabled={!file} color="red" onClick={clearFile}>
          Reset
        </Button>
      </Group>

      {file && (
        <Text size="sm" ta="center" mt="sm">
          Picked file: {file.name}
        </Text>
      )}
    </>
  );
}

서버 컴포넌트와의 비호환성

FileButton은 함수를 children으로 사용해야 하기 때문에 React 서버 컴포넌트와 호환되지 않아요. 사용하려면 파일 맨 위에 "use client";를 추가해요.

더 알아보기 (Learn more)

• FileInput — 파일 선택 입력 컴포넌트
• Button — 버튼 컴포넌트