파일 업로드

파일 업로드는 하나 이상의 디바이스의 로컬 파일을 선택하고 첨부하는 데 사용하는 입력 컴포넌트이다.

사용 지침

민원 첨부·증빙 자료 제출처럼 파일 첨부가 필요한 폼에 사용하고, 허용 확장자·최대 용량·다중 선택 여부를 사전에 안내해 업로드 실패를 줄입니다.

컨텐츠 영역

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

examples/file-upload/FileUploadDefault.tsx

import { FileUpload } from "@/components/ui/file-upload"

export default function FileUploadDefault() {

다양한 상태의 파일 목록을 보여줍니다.

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

6개/ 10개

examples/file-upload/FileUploadWithFiles.tsx

"use client"

import * as React from "react"

비활성화된 파일 업로드

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

examples/file-upload/FileUploadDisabled.tsx

import { FileUpload } from "@/components/ui/file-upload"

export default function FileUploadDisabled() {

파일 삭제가 허용되지 않습니다.

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

2개/ 10개

examples/file-upload/FileUploadNoDelete.tsx

"use client"

import * as React from "react"

JPG, PNG 파일만 업로드 가능합니다.

이미지 파일을 선택하거나 드래그하여 업로드하세요.

examples/file-upload/FileUploadRestrictedFileTypes.tsx

import { FileUpload } from "@/components/ui/file-upload"

export default function FileUploadRestrictedFileTypes() {

실제로 파일을 업로드하고 삭제할 수 있습니다.

파일을 선택하거나 드래그하여 업로드하세요.

examples/file-upload/FileUploadInteractive.tsx

"use client"

import * as React from "react"

이름	타입	기본값	설명
acceptedFileTypes	string[]	—	—
allowDelete	boolean	true	—
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
countUnit	string	개	—
deleteAllText	string	전체 파일 삭제	—
deleteText	string	삭제	—
description	string	—	—
disabled	boolean	false	—
downloadText	string	다운로드	—
files	FileItem[]	—	—
fileTypeErrorMessage	((acceptedLabel: string) => string)	(acceptedLabel) => `지원하지 않는 파일 형식입니다.\n${acceptedLabel} 형식만 업로드 가능합니다.`	—
id	string	—	—
maxFiles	number	10	—
maxFileSize	number	20 * 1024 * 1024	—
maxSizeErrorMessage	((maxSizeLabel: string) => string)	(maxSizeLabel) => `등록 가능한 파일 용량을 초과하였습니다.\n${maxSizeLabel} 미만의 파일만 등록할 수 있습니다.`	—
onAllFilesDelete	(() => void)	—	—
onClick	MouseEventHandler<HTMLDivElement>	—	—
onFileDelete	((fileId: string) => void)	—	—
onFilesChange	((files: FileItem[]) => void)	—	—
onFileUpload	((file: File) => Promise<void>)	—	—
previewText	string	바로보기	—
selectFileText	string	파일선택	—
style	CSSProperties	—	—
tabIndex	number	—	—
uploadErrorMessage	string	파일 업로드에 실패했습니다.	—
uploadingLabel	string	업로드 중	—
uploadText	string	첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.	—
variant	enum	default	—