MultiUpload Flow

MultiUpload Flow is a customizable, multi-file upload component designed for OutSystems 11 Reactive Web Applications. It provides an intuitive drag-and-drop interface, automatic file processing, real-time progress indicators, file previews, validation, and event-driven integration.

Built as a reusable OutSystems Library, MultiUpload Flow allows developers to implement advanced file upload experiences without building the entire interface from scratch.

Key Features

• Multiple File Uploads: Select or drag and drop multiple files into the upload area.

• Automatic Processing: Files are processed automatically after selection.

• Real-Time Progress: Individual and overall progress indicators with dynamic colors.

• File Preview: Preview supported images and PDF documents in a responsive modal overlay.

• File Management: Remove files, clear the queue, and reorder files using drag-and-drop controls.

• File Validation: Configure accepted file extensions, maximum file size, and maximum number of files.

• Error Handling: Dedicated collapsible error section with animated notifications and countdown progress bars.

• Unique File Identification: Each file receives a unique FileId, allowing applications to synchronize uploaded files and removal actions.

• Batch Completion Tracking: Detect when all files have finished processing and determine whether the entire batch completed successfully.

• Base64 Support: File content is provided as Base64-encoded text for integration with OutSystems logic.

• Light and Dark Modes: Built-in support for both interface themes.

• Custom CSS Integration: Use the ExtendClass parameter to adapt the component's appearance to your application's design system.

• Multilingual Interface: Supports Portuguese (Brazil) and English.

• Configurable Queue Height: Control the file list's maximum height and scrolling behavior.

• Responsive Design: Compact interface suitable for different screen sizes.

Event-Driven Integration

MultiUpload Flow exposes four events:

• OnUploadComplete: Returns the file identifier, filename, Base64 content, and MIME type.

• OnUploadError: Reports file validation or processing errors.

• OnAllUploadsComplete: Returns batch statistics and the AllCompleted Boolean indicating whether all files completed successfully.

• OnFileRemoved: Returns the unique file identifier, filename, and file size, allowing the consuming application to identify the exact file removed.

Customization

The component supports configurable upload restrictions, language selection, dark mode, and custom visual styling.

With ExtendClass, developers can apply application-specific CSS classes and override supported design variables, including colors, backgrounds, typography, borders, and other visual properties.

How It Works

1. Add the MultiUpload Flow Web Block to a Reactive Web screen.

2. Configure the input parameters according to your application's requirements.

3. Handle the upload and removal events in your application logic.

4. Receive each processed file as Base64-encoded text.

5. Convert, process, or store the file using your application's own OutSystems logic.

Important Notes

MultiUpload Flow handles file selection, client-side validation, browser-side processing, and delivery of file data through OutSystems events.

The component does not automatically store files in a database or upload them to an external server. File persistence must be implemented by the consuming application.

The component is designed for OutSystems 11 Reactive Web Applications and can be reused across multiple applications.