DocyFieldUpload

File upload form field using expo-document-picker for native file selection.

iOSAndroid

Preview DocyFieldUpload on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Overview

DocyFieldUpload provides a native file picker using expo-document-picker. Users can select single or multiple files from device storage with configurable file type filters and size limits.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-form-fields

# Required: expo-document-picker
npx expo install expo-document-picker

Required Packages(1 package)

pnpm add expo-document-picker

Usage

import { DocyFieldUpload } from '@/components/docyrus-native/form-fields/docy-field-upload';

<DocyFieldUpload
  name="attachments"
  label="Attachments"
  maxFiles={5}
  maxSizeBytes={10 * 1024 * 1024}
  allowedTypes={['application/pdf', 'image/*']}
  onChange={(files) => console.log(files)}
/>

API Reference

Prop	Type	Default	Description
`value`	`UploadedFile[]`	`[]`	Array of uploaded files
`onChange`	`(files: UploadedFile[]) => void`	—	Called when files change
`maxFiles`	`number`	`10`	Maximum number of files allowed
`maxSizeBytes`	`number`	—	Max size per file in bytes
`allowedTypes`	`string[]`	`['/']`	MIME type filters
`onUpload`	`(files: UploadedFile[]) => Promise<void>`	—	Optional upload handler
`uploadLabel`	`string`	`'Select files'`	Custom button label

Inherits all DocyFieldBaseProps (name, label, placeholder, helpText, required, disabled, readOnly, error, size, variant, etc.)

Type Exports

Type	Description
`UploadedFile`	`{ uri: string; name: string; size: number; mimeType: string }`
`DocyFieldUploadProps`	Props for DocyFieldUpload component

Compatibility

Platform	Support
Expo Go	Yes
Dev Client	Yes
Bare RN	Requires config plugin