File Upload
드래그 앤 드롭 또는 클릭으로 파일을 업로드할 수 있는 컴포넌트입니다. 이미지 미리보기, 파일 유효성 검사, 업로드 진행률 등 다양한 기능을 제공합니다.
설치
Terminal
npx @msub-core/ui-cli add file-upload
사용법
TSX
import {
FileUpload,
FileUploadDropzone,
FileUploadPreview,
type FileUploadFile,
} from "@msub-core/ui/components/file-upload"
function MyComponent() {
const [files, setFiles] = useState<FileUploadFile[]>([])
return (
<FileUpload onFilesChange={setFiles}>
<FileUploadDropzone />
<FileUploadList />
</FileUpload>
)
}기본
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| files | FileUploadFile[] | - | No | 선택된 파일 목록 (controlled) |
| defaultFiles | FileUploadFile[] | [] | No | 기본 파일 목록 (uncontrolled) |
| onFilesChange | (files: FileUploadFile[]) => void | - | No | 파일 변경 핸들러 |
| onFileRemove | (index: number) => void | - | No | 파일 제거 핸들러 |
| onError | (error: string) => void | - | No | 에러 핸들러 |
| accept | string | - | No | 허용할 파일 타입 (MIME type) |
| maxSize | number | - | No | 최대 파일 크기 (bytes) |
| maxFiles | number | - | No | 최대 파일 개수 |
| multiple | boolean | true | No | 다중 파일 선택 허용 |
| disabled | boolean | false | No | 비활성화 상태 |
| variant | "default" | "compact" | "card" | "default" | No | 변형 스타일 |
| size | "sm" | "default" | "lg" | "default" | No | 크기 |
변형
Default
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
Compact
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
Card
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
크기
Small
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
Default
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
Large
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
이미지 미리보기
이미지를 드래그하거나 클릭하여 업로드
PNG, JPG, GIF 등 모든 이미지 형식
파일 타입 제한
이미지만 허용
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
PDF와 문서 파일만 허용
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
파일 크기 제한
파일을 드래그하거나 클릭하여 업로드
최대 5MB
파일 개수 제한
파일을 드래그하거나 클릭하여 업로드
최대 3개 파일
업로드 진행률
파일을 업로드하면 진행률이 표시됩니다
에러 상태
1MB 이상 파일은 에러가 표시됩니다
비활성화
파일을 업로드해주세요
클릭하거나 드래그하여 파일을 추가할 수 있습니다
프로필 이미지 업로드 예제
프로필 이미지 업로드
JPG, PNG (최대 2MB)
문서 업로드 예제
문서 파일을 드래그하거나 클릭하여 업로드
PDF, DOC, DOCX, TXT (최대 10MB, 5개까지)
갤러리 업로드 예제
갤러리 이미지 업로드
최대 10개 이미지 (각 5MB 이하)