File Upload

File Upload (파일 업로드)

사용자가 기기에서 파일을 선택하고 업로드할 때 사용하는 컴포넌트예요. 드래그 앤 드롭, 파일 목록 표시, 미리보기 등 파일 업로드에 필요한 기능을 제공해요.

출처: 문서

본문

사용법 (Usage)

import { FileUpload } from "@chakra-ui/react"

<FileUpload.Root>
  <FileUpload.HiddenInput />
  <FileUpload.Label />
  <FileUpload.Dropzone>
    <FileUpload.DropzoneContent />
  </FileUpload.Dropzone>
  <FileUpload.Trigger />
  <FileUpload.ItemGroup>
    <FileUpload.Item>
      <FileUpload.ItemPreview />
      <FileUpload.ItemFileName />
      <FileUpload.ItemSizeText />
      <FileUpload.ItemDeleteTrigger />
    </FileUpload.Item>
  </FileUpload.ItemGroup>
</FileUpload.Root>

단축 (Shortcuts)

FileUpload 컴포넌트는 일반적인 사용 사례를 위한 여러 단축(shortcut)도 제공해요.

FileUploadItems

기본적으로 FileUploadItems 단축은 업로드된 파일의 목록을 렌더링해요.

이렇게 할 수도 있어요.

<FileUpload.ItemGroup>
  <FileUpload.Context>
    {({ acceptedFiles }) =>
      acceptedFiles.map((file) => (
        <FileUpload.Item key={file.name} file={file}>
          <FileUpload.ItemPreview />
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger />
        </FileUpload.Item>
      ))
    }
  </FileUpload.Context>
</FileUpload.ItemGroup>

파일 업로드 항목을 커스터마이즈할 필요가 없다면 이렇게 더 간결하게 할 수 있어요.

<FileUpload.ItemGroup>
  <FileUpload.Items />
</FileUpload.ItemGroup>

FileUploadList

FileUploadList 단축은 업로드된 파일의 목록을 렌더링해요. FileUpload.ItemGroup과 FileUpload.Items 컴포넌트를 조합한 거예요.

<FileUpload.List />

는 다음 코드와 같아요.

<FileUpload.ItemGroup>
  <FileUpload.Items />
</FileUpload.ItemGroup>

예제 (Examples)

허용된 파일 (Accepted Files)

accept prop을 사용해서 업로드할 수 있는 파일들을 정의할 수 있어요.

| 예제 (file-upload-accepted-files) |

여러 파일 (Multiple Files)

maxFiles prop을 사용해서 여러 파일을 한 번에 업로드할 수 있어요.

| 예제 (file-upload-multiple) |

커스텀 미리보기 (Custom Preview)

파일을 위한 커스텀 이미지 미리보기를 표시하는 예시예요.

| 예제 (file-upload-custom-preview) |

디렉터리 (Directory)

directory prop을 사용해서 파일 대신 디렉터리를 선택할 수 있게 만들 수 있어요.

| 예제 (file-upload-directory) |

미디어 캡처 (Media Capture)

capture prop을 사용해서 다양한 환경과 미디어 유형에서 파일을 선택하고 업로드할 수 있어요.

참고: 이 기능은 모든 브라우저에서 완전히 지원되지는 않아요.

| 예제 (file-upload-media-capture) |

드롭존 (Dropzone)

드롭존 안에 여러 파일을 드롭하고 maxFiles prop을 사용해서 한 번에 업로드할 수 있는 파일 수를 설정할 수 있어요.

| 예제 (file-upload-with-dropzone) |

조건부 드롭존 (Conditional Dropzone)

useFileUploadContext를 사용해서 허용된 파일 수를 확인하고, 최대 파일 수에 도달했을 때 드롭존을 숨길 수 있어요.

| 예제 (file-upload-with-conditional-dropzone) |

입력 (Input)

FileInput 컴포넌트를 사용해서 텍스트 입력처럼 보이는 트리거를 만들 수 있어요.

| 예제 (file-upload-with-input) |

지우기 가능 (Clearable)

지울 수 있는 파일 업로드 입력의 예시예요.

| 예제 (file-upload-with-input-clear) |

파일 붙여넣기 (Pasting Files)

클립보드에서 붙여넣은 파일을 처리하는 예시예요.

| 예제 (file-upload-with-paste-event) |

스토어 (Store)

파일 업로드를 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useFileUpload 스토어 훅을 사용하는 거예요.

이렇게 하면 파일 업로드 바깥에서도 파일 업로드의 상태와 메서드에 접근할 수 있어요.

| 예제 (file-upload-with-store) |

Props

Root

| PropTable (FileUpload / Root) |

탐색 (Explorer)

File Upload 컴포넌트의 각 부분을 인터랙티브하게 살펴볼 수 있어요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.

| 예제 (file-upload-explorer-demo) |