File Upload
A button that opens the file picker, with the picked files listed below.Basic
Preview
Code
No file chosen
PDF, up to 5 MB.Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
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
Preview
Code
kitchen.jpg1.8 MB
living-room.png3.1 MB
API reference
FileUpload
| Prop | Type | Default | Description |
|---|---|---|---|
value | PickedFile[] | — | `{ name, size?, type?, uri? (native), file? (web File) }`. |
defaultValue | PickedFile[] | — | Starting `value` when uncontrolled. |
onValueChange | (files: PickedFile[]) => void | — | Called when files are picked or removed. |
multiple | boolean | false | Keep several files; otherwise a new pick replaces the file. |
accept | string | — | Allowed types, as in `<input accept>`: `image/*,.pdf`. |
maxSize | number | — | Largest allowed file, in bytes. |
maxFiles | number | — | 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. |
buttonLabel | string | 'Choose file' | The button text (“Choose files” with `multiple`). |
emptyText | string | 'No file chosen' | Shown while no file is chosen (“No files chosen” with `multiple`). |
size | 'sm' | 'md' | 'lg' | 'md' | Button size. |
invalid | boolean | false | Error styling and `aria-invalid`. |
disabled | boolean | false | Not 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.
| Key | Action |
|---|---|
| Enter / Space | Opens 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).