ObjectUIFields
File Field
File upload with multiple file support and metadata display
The File Field component provides a file upload interface with support for multiple files, file type filtering, and file metadata display.
Basic Usage
Basic File Upload
Multiple Files
Multiple File Upload
File Type Restrictions
Pdf Files Only
Field Schema
A file field is authored as FileFieldMetadata (@object-ui/types), which is the
source of truth for the key set: it extends BaseFieldMetadata with the upload limits.
A stored file is UploadedFileMetadata, exported from the same package.
import type { FileFieldMetadata, UploadedFileMetadata } from '@object-ui/types';
const attachments: FileFieldMetadata = {
type: 'file',
name: 'attachments',
label: 'Attachments',
help: 'PDF or Word, up to 10 MB each.',
multiple: true,
accept: ['application/pdf', 'application/msword'],
max_size: 10 * 1024 * 1024,
max_files: 5,
};
// The shape of one stored file — the field's VALUE, not its metadata.
const storedFile: UploadedFileMetadata = {
name: 'contract.pdf',
original_name: 'Contract (signed).pdf',
size: 248_310,
mime_type: 'application/pdf',
url: 'https://files.example.com/contract.pdf',
};The value being edited, and the className / disabled a host supplies, are not
metadata keys — they are runtime widget props. See Field Widget Props.
Accepted File Types
Common MIME type examples:
// Documents
accept: ['application/pdf', 'application/msword']
// Images
accept: ['image/png', 'image/jpeg', 'image/gif']
// Archives
accept: ['application/zip', 'application/x-rar']
// Spreadsheets
accept: ['application/vnd.ms-excel', 'text/csv']
// Wildcards
accept: ['image/*'] // All imagesFeatures
- File List Display: Shows uploaded files with names and sizes
- Remove Files: Individual file removal with X button
- Size Display: File sizes shown in KB/MB
- Upload Button: Clear upload interface
- Multiple Selection: Support for batch file uploads
Cell Renderer
In tables/grids, displays file count:
import { FileCellRenderer } from '@object-ui/fields';
// Renders: "3 files" or "document.pdf"Integration Notes
This component creates object URLs for file preview. Actual file upload requires backend integration:
// Frontend creates preview
const fileData = {
name: 'document.pdf',
size: 1024000,
mime_type: 'application/pdf',
url: URL.createObjectURL(file)
};
// Backend handles actual upload
const uploadToServer = async (file) => {
const formData = new FormData();
formData.append('file', file);
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
return response.json();
};Use Cases
- Document Management: PDF uploads, contracts
- File Attachments: Email attachments, support tickets
- Media Libraries: Asset uploads, resources
- Data Import: CSV files, batch uploads