FileUpload

File upload input component allowing users to select and upload files with validation for file types, size limits, and multiple file selection.

Use Cases

• Document upload forms (resume, contracts, PDFs)
• Image upload for profile pictures or galleries
• Multi-file uploads for document collections
• File attachment fields with size/type validation

Properties

name

Unique field name for form submission - must be unique within the form. Type: string.

label

Field label displayed above input. Type: string.

required

Whether field must have a file selected before form submission. Type: boolean. Default: false

accept

Accepted file types - comma-separated MIME types or extensions. Type: string.

Tip: Documents: Use '.pdf,.docx' for document uploads. Images: Use 'image/*' or '.jpg,.png,.gif' for images. Specific: Always limit file types for security - don’t leave accept undefined.

multiple

Allow multiple file selection. Type: boolean. Default: false

Tip: Single: Use false (default) for single file uploads like profile pictures. Multiple: Use true for document collections or batch uploads.

maxSize

Maximum file size in megabytes (MB). Type: number.

Tip: Images: Use 5-10 MB for image uploads. Documents: Use 10-25 MB for document uploads. Videos: Use 50-100 MB for video uploads (or don’t allow videos).

width

Field width as percentage of container. Type: string. Options: 100%, 75%, 50%. Default: 100%

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string.

Tip: Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi-tenant isolation enforced).

dataBinding

Binds field to a page data source for dynamic data loading and saving. Type: object.

• pageDataSourceRef – Reference to page data source (e.g., '@page.userProfile'). Type: string.
• sourceId – GUID of the data table or API connection. Type: string.
• sourceType – Type of data source. Type: string. Options: table, api.
• operationType – Operation to perform on data source. Type: string. Options: Get, GetAll, Create, Update, Delete.
• fieldName – Database column or API field name to bind to. Type: string.
• isReadOnly – Whether field is read-only (displays data but doesn’t submit). Type: boolean.
• writeOperation – Operation used when saving data. Type: string. Options: Create, Update.

Best Practices

• Always set accept to limit file types for security (e.g., .pdf,.docx,image/*)
• Set maxSize to prevent large file uploads that could cause performance issues
• Use required: true for mandatory uploads
• Use multiple: true only when users need to upload multiple files at once
• Provide clear labels explaining what file types and sizes are expected

Common Mistakes

Not setting accept to limit file types

Why it's a problem: Security risk - users could upload executable files or malicious content

Fix: Always set accept (e.g., '.pdf,.docx' or 'image/*') to limit allowed file types

Not setting maxSize for file uploads

Why it's a problem: Users could upload very large files causing performance issues or storage problems

Fix: Set maxSize to reasonable limit (5-25 MB for most use cases)

Using multiple: true when single file is expected

Why it's a problem: Confusing UX - users don’t know if they should select one or many files

Fix: Use multiple: false (default) for single file uploads like profile pictures