File Upload

A button that opens the file picker, with the picked files listed below.
Stable
Web
iOS
Android
@advui/core
Source

Basic

No file chosen
PDF, up to 5 MB.

Installation

pnpm
pnpm add @advui/core
npm
npm install @advui/core

Usage

import { FileUpload, Field, setFilePicker } from '@advui/core'
import * as DocumentPicker from 'expo-document-picker'

// Once, at app start (iOS / Android; web uses the browser's dialog):
setFilePicker(async ({ multiple, accept }) => {
  // The picker filters by MIME type only; extensions (".pdf") are checked after picking.
  const rules = accept?.split(',').map((rule) => rule.trim()) ?? []
  const result = await DocumentPicker.getDocumentAsync({
    multiple,
    type: rules.length && rules.every((rule) => rule.includes('/')) ? rules : '*/*',
  })
  return result.canceled
    ? null
    : result.assets.map((a) => ({ name: a.name, size: a.size, type: a.mimeType, uri: a.uri }))
})

<Field label="Résumé" description="PDF, up to 5 MB.">
  <FileUpload accept=".pdf" maxSize={5_000_000} onValueChange={setFiles} />
</Field>

Examples

Several images with limits

kitchen.jpg1.8 MB
living-room.png3.1 MB
Up to 4 images, 5 MB each.

API reference

FileUpload

PropTypeDefaultDescription
valuePickedFile[]—`{ name, size?, type?, uri? (native), file? (web File) }`.
defaultValuePickedFile[]—Starting `value` when uncontrolled.
onValueChange(files: PickedFile[]) => void—Called when files are picked or removed.
multiplebooleanfalseKeep several files; otherwise a new pick replaces the file.
acceptstring—Allowed types, as in `<input accept>`: `image/*,.pdf`.
maxSizenumber—Largest allowed file, in bytes.
maxFilesnumber—Most files kept when `multiple`.
onReject({ file, reason: 'type' | 'size' | 'count' })[] => void—Files that were refused; show the reason with a Field’s `error`.
pickFiles({ multiple, accept }) => Promise<PickedFile[] | null>—This upload’s picker. Defaults to the browser on web and `setFilePicker` on native.
buttonLabelstring'Choose file'The button text (“Choose files” with `multiple`).
emptyTextstring'No file chosen'Shown while no file is chosen (“No files chosen” with `multiple`).
size'sm' | 'md' | 'lg''md'Button size.
invalidbooleanfalseError styling and `aria-invalid`.
disabledbooleanfalseNot focusable or editable.

Accessibility

  • The control is a real button; a Field’s label names it, and help or error text describes it.
  • The picked files are a list; each has a remove button named "Remove {file name}".
  • Refused files are reported through onReject, so the reason can be shown as text.
Keyboard interactions
KeyAction
Enter / SpaceOpens the file picker.

Platform notes

Web
Uses a hidden <input type="file">, so the browser’s own dialog and accept filtering apply.
iOS
Uses the picker from setFilePicker (e.g. expo-document-picker); without one the button is disabled and a warning is logged in development.
Android
Uses the picker from setFilePicker (e.g. expo-document-picker).
Since v0.5.0Last updated Nov 2, 2026Edit this page on GitHub