ObjectUIComponentsForm
File Upload
Modern file upload component with drag-and-drop support
The File Upload component provides a futuristic interface for uploading files with visual feedback, progress indication, and multiple file support.
Basic Usage
Simple Upload
Single vs Multiple
Single File
Multiple Files
File Type Restrictions
Images Only
Schema
interface FileUploadSchema {
type: 'file-upload';
// Required
id: string; // Field identifier
// Configuration
name?: string; // Field name for form submission
label?: string; // Label text
buttonText?: string; // Upload button text
// File constraints
accept?: string; // Accepted file types (e.g., 'image/*', '.pdf,.doc')
multiple?: boolean; // Allow multiple files (default: false)
maxSize?: number; // Maximum file size in bytes
maxFiles?: number; // Maximum number of files (for multiple)
// States
disabled?: boolean; // Whether field is disabled
// Help text
description?: string; // Help text or description
error?: string; // Error message
// Styling
className?: string; // Tailwind CSS classes
wrapperClass?: string; // Wrapper container classes
// Base properties
visible?: boolean | string;
testId?: string;
}