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
{
"type": "file-upload",
"id": "basic-upload",
"label": "Upload files",
"buttonText": "Choose files"
}Single vs Multiple
Single File
{
"type": "file-upload",
"id": "single-upload",
"label": "Single file",
"multiple": false,
"buttonText": "Select one file"
}Multiple Files
{
"type": "file-upload",
"id": "multi-upload",
"label": "Multiple files",
"multiple": true,
"buttonText": "Select multiple files"
}File Type Restrictions
Images Only
{
"type": "file-upload",
"id": "image-upload",
"label": "Upload images",
"accept": "image/*",
"multiple": true,
"buttonText": "Choose images"
}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;
}Examples
Document Upload
Document Upload
{
"type": "file-upload",
"id": "doc-upload",
"label": "Upload documents",
"accept": ".pdf,.doc,.docx,.txt",
"multiple": true,
"buttonText": "Select documents",
"description": "Accepted formats: PDF, DOC, DOCX, TXT"
}Profile Picture
Avatar Upload
{
"type": "file-upload",
"id": "avatar-upload",
"label": "Profile Picture",
"accept": "image/png,image/jpeg",
"multiple": false,
"buttonText": "Upload photo"
}Full Example
Form Example
{
"type": "div",
"className": "max-w-md space-y-6 p-6 border rounded-lg",
"children": [
{
"type": "text",
"content": "Project Files",
"className": "text-xl font-semibold"
},
{
"type": "file-upload",
"id": "project-files",
"label": "Upload project files",
"accept": "*",
"multiple": true,
"buttonText": "Drop files here or click to upload"
}
]
}