File Field

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

interface FileFieldSchema {
  type: 'file';
  name: string;                  // Field name/ID
  label?: string;                // Field label
  value?: FileMetadata | FileMetadata[];  // Current file(s)
  required?: boolean;            // Is field required
  readonly?: boolean;            // Read-only mode
  disabled?: boolean;            // Disabled state
  className?: string;            // Additional CSS classes
  
  // File Options
  multiple?: boolean;            // Allow multiple files
  accept?: string[];             // Accepted MIME types
  max_size?: number;             // Max file size in bytes
  max_files?: number;            // Max number of files
}

interface FileMetadata {
  name: string;                  // File name
  original_name?: string;        // Original file name
  size?: number;                 // File size in bytes
  mime_type?: string;            // MIME type
  url?: string;                  // File URL
}

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 images

Features

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

File Field

Basic File Upload

Multiple File Upload

Pdf Files Only

On this page