GitHub

File Upload

파일 선택과 드래그 앤 드롭, 업로드 상태 목록을 제공하는 파일 첨부 컴포넌트입니다.

첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 직접 선택해 주세요.

첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.

4개 / 10개
  • 위임장.hwp17KB
  • 사업자등록증.pdf1.2MB
  • 신청서.pdf840KB
  • 재직증명서.png2.4MB
examples/krds/file-upload-demo.tsx
import { FileUpload } from "@/components/ui/file-upload"

const files = [

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/file-upload.json

사용법

import { FileUpload } from "@/components/ui/file-upload"
<FileUpload name="attachments" multiple maxFiles={3} files={[{ name: "사업자등록증.pdf", size: "1.2MB", status: "complete" }]} />

KRDS 정렬

FileUpload는 native file input, field, button, progress, alert 패턴을 조합한 KRDS 파일 첨부 UI입니다. 브라우저 파일 선택 동작을 유지하고 파일 목록/상태 렌더링만 wrapper가 담당합니다.

구성

다음 조합으로 FileUpload를 사용할 수 있습니다.

FileUpload
├── FileUploadList
├── FileUploadItem
├── FileUploadStatus

예제

Basic

파일 선택과 드래그 앤 드롭, 업로드 상태 목록을 제공하는 파일 첨부 컴포넌트입니다.

첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 직접 선택해 주세요.

첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.

4개 / 10개
  • 위임장.hwp17KB
  • 사업자등록증.pdf1.2MB
  • 신청서.pdf840KB
  • 재직증명서.png2.4MB
examples/krds/file-upload-demo.tsx
import { FileUpload } from "@/components/ui/file-upload"

const files = [

API 참조

속성타입기본값설명
filesFileUploadFile[]-표시할 파일 목록
onFilesChange(files: FileList) => void-파일 선택/드롭 콜백
onRemoveFile(file, index) => void-파일 삭제 콜백