전체 카탈로그
Data InputFileInput19 props

File Input

FileInput provides file upload with optional drag-and-drop support. Use it for single or multiple file selection with built-in validation for file type, size, and count. Pair wi...

공식 문서 열기
live previewData Input

Preview

Dropzone mode with file type guidance.
Choose file

Import

import {FileInput} from '@astryxdesign/core/FileInput';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

FileInput provides file upload with optional drag-and-drop support. Use it for single or multiple file selection with built-in validation for file type, size, and count. Pair wi...

fileinputfileuploaddragdropdropzoneattachmentbrowse

Important props

valueFile | File[] | nullrequired
onChange(files: File | File[] | null) => voidrequired
changeAction(files: File | File[] | null) => Promise<void>optional
modeinput | dropzoneoptional

Theming targets

astryx-file-input

Best practices

  • DoAlways specify an accept prop to guide users toward valid file types.
  • DoUse maxSize and maxFiles to prevent oversized uploads; the component handles validation and error display automatically.
  • DoAdd a description to communicate constraints like file size limits or accepted formats.
  • DoUse changeAction for immediate upload workflows that benefit from optimistic UI.