FileDropzone
파일을 끌어다 놓거나 눌러서 골라요. 고르기와 검사만 하고, 업로드는 프로젝트가 해요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
file · default
file · drag-over
file · invalid
file · disabled
image · default
image · drag-over
image · invalid
image · disabled
사용법
- Field로 감싸요다른 폼 항목처럼 라벨, 설명, 에러가 연결돼요.
- 에러 두 종류고르는 순간 조건에 맞지 않으면 영역 안에, 제출할 때 확인하는 규칙은 Field error로 아래에 보여 줘요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| onFilesChange | (accepted, rejected) => void (필수) | — |
| accept · multiple · maxSize | 조건 | — |
| variant | file · image | file |
| title · description | 영역 문구와 상태 | — |
코드
tsx
<Field label="첨부 파일" description="PDF, 10MB 이하, 5개까지">
<FileDropzone multiple accept=".pdf" maxSize={10_000_000} onFilesChange={(accepted) => upload(accepted)} />
</Field>