FileUpload
드래그 앤 드롭과 파일 검증을 지원하는 KRDS 기반 파일 업로드 컴포넌트
개요
파일 첨부
파일을 선택하거나 끌어다 놓으세요
설치
사용법
FileUpload와 UploadedFile 타입을 import하여 사용합니다. onUpload, onChange, onError 콜백으로 파일 업로드 상태를 관리합니다.
예제
기본
필수 콜백만으로 간단하게 사용할 수 있습니다.
파일 첨부
파일을 선택하거나 끌어다 놓으세요
제목과 설명
title과 description prop으로 안내 문구를 제공합니다.
서류 첨부
최대 5개 파일, 각 10MB 이하
파일을 선택하거나 끌어다 놓으세요
테두리 스타일
bordered prop으로 테두리가 있는 스타일을 적용합니다.
테두리가 있는 파일 업로드
파일을 선택하거나 끌어다 놓으세요
파일 타입 제한
accept prop으로 허용할 파일 유형을 지정합니다.
이미지만 업로드
파일을 선택하거나 끌어다 놓으세요
형식: image/*
문서 파일 업로드
파일을 선택하거나 끌어다 놓으세요
형식: .pdf,.doc,.docx,.hwp
파일 크기 제한
maxSize prop으로 최대 파일 크기를 바이트 단위로 제한합니다.
최대 5MB 파일 업로드
파일을 선택하거나 끌어다 놓으세요
최대 크기: 5 MB
다중 파일 업로드
multiple과 maxFiles prop으로 여러 파일 업로드를 허용합니다.
여러 파일 업로드
최대 5개 파일
파일을 선택하거나 끌어다 놓으세요
파일 액션
onPreview, onDownload 콜백으로 미리보기와 다운로드 기능을 제공합니다.
파일 미리보기 및 다운로드
파일을 선택하거나 끌어다 놓으세요
형식: image/*,.pdf
비활성화
disabled prop으로 업로드 기능을 비활성화합니다.
비활성화된 업로드
파일을 선택하거나 끌어다 놓으세요
커스텀 텍스트
버튼 텍스트와 안내 문구를 커스터마이징할 수 있습니다.
프로젝트 파일
여기를 클릭하거나 파일을 드래그하세요
완전한 예제
모든 주요 prop을 조합한 실제 사용 예제입니다.
프로젝트 서류 제출
이미지, PDF, 문서 파일만 업로드 가능합니다
파일을 선택하거나 끌어다 놓으세요
형식: image/*,.pdf,.doc,.docx,.hwp · 최대 크기: 10 MB
접근성
WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.
- 키보드 접근성: 파일 입력은 숨겨져 있지만
sr-only클래스를 사용하여 스크린 리더에 접근 가능합니다 - 드래그 앤 드롭: 마우스 없이도 버튼을 통해 파일 선택이 가능합니다
- 상태 표시: 업로드 중, 완료, 에러 상태가 시각적 아이콘과 텍스트로 명확히 표시됩니다
- ARIA 속성: 진행률 표시줄에
role="progressbar"와 적절한 aria 속성이 적용됩니다 - 에러 처리: 검증 실패 시 명확한 에러 메시지를 제공합니다