파일 업로드

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

사용 지침

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

컨텐츠 영역

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

examples/file-upload/FileUploadDefault.tsx

import { FileUpload } from "@/components/ui/dynamic/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/dynamic/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/dynamic/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	—	—
description	string	—	—
disabled	boolean	false	—
files	FileItem[]	—	—
id	string	—	—
maxFiles	number	10	—
maxFileSize	number	20 * 1024 * 1024	—
onAllFilesDelete	(() => void)	—	—
onClick	MouseEventHandler<HTMLDivElement>	—	—
onFileDelete	((fileId: string) => void)	—	—
onFilesChange	((files: FileItem[]) => void)	—	—
onFileUpload	((file: File) => Promise<void>)	—	—
style	CSSProperties	—	—
tabIndex	number	—	—
uploadText	string	첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.	—