Interactive button components for triggering actions and file uploads with comprehensive styling and configuration options.
Buttons are essential interactive elements that enable users to trigger actions, navigate between sections, and upload files. FlowX.AI provides two specialized button types, each optimized for specific use cases with extensive customization options.
Basic buttons serve as the primary interaction mechanism for users to perform actions within your application. They can trigger process flows, send notifications, navigate to different sections, or execute business logic.
File upload buttons provide a specialized interface for file selection with built-in validation and user feedback. They’re essential for document submission, image uploads, and data import workflows.
Available starting with FlowX.AI 5.3.0: Enhanced file upload experience with improved loading states, toast notifications, and better user feedback.
File upload buttons now provide feedback hints for success, progress, and error states. Previously, users lacked sufficient feedback when uploading a file unless they had a document preview or image link, making it difficult to know if the file was uploaded successfully or to see the progress.
Loading Overlay
Optional overlay loader during file upload for both web and mobile
Toast Messages
Success and error messages displayed as toasts at runtime, informing users about upload status
Dynamic Messages
Display dynamic values in toast and loading messages for context-aware feedback
Configure how loading indicators appear during file uploads:
Option
Description
NONE
No loading overlay displayed
OVERLAY
Full-screen overlay with spinner and optional loading message
Loading Message Configuration:
Configure custom messages using substitution tags or dynamic values
Works consistently across web and mobile platforms
Example messages:
“Uploading your document…”
“Processing $…”
“Please wait while we upload your file”
Success Messages
Success Toast: Displayed when the file upload completes successfully
Enable: Toggle “Toast notification on success” to show the toast
Custom message: Set a personalized success message with dynamic values
Auto-dismiss: Toast automatically disappears after 3-5 seconds
Example messages:
“File uploaded successfully!”
”$ has been uploaded”
“Your document is ready for processing”
Error Messages
Error Toast: Displayed when the file upload fails
Enable: Toggle “Toast notification on error” to show the toast
Custom message: Set a personalized error message with dynamic values
Auto-dismiss: Toast automatically disappears after 3-5 seconds
Example messages:
“Upload failed. Please try again.”
“Unable to upload $. Check your connection.”
“File upload error. Please select a different file.”
Use substitution tags and dynamic values in your loader and toast messages to provide contextual feedback that includes file names or other relevant data.
For advanced customization, developers can provide custom loader components through the SDK. The customLoader object supports file upload loaders alongside existing process loaders:
Report incorrect code
Copy
Ask AI
type CustomLoaders = { startProcess?: Component, // Loader for process start reloadProcess?: Component, // Loader for process reload defaultUpload?: Component, // Default loader for file uploads defaultAction?: Component, // Default loader for actions actions?: Record<string, Component> // Named action loaders}
Loader resolution order:
If a named action loader exists (customLoader.actions?.[actionName]), use it
Otherwise, if defaultAction or defaultUpload is defined, use that
Fall back to the internal SDK loader
Custom loaders allow you to maintain consistent branding and UX patterns across your application while leveraging the FlowX upload infrastructure.
