MultiUpload Flow is a reusable file upload component for OutSystems 11 Reactive Web Applications. It provides drag-and-drop file selection, multiple file processing, progress tracking, file previews, validation, and customizable styling.

1. Installation

1. Install MultiUpload Flow from the OutSystems Forge.

2. Open your Reactive Web Application in Service Studio.

3. Open Manage Dependencies and add the MultiUploadFlow Web Block.

4. Drag the Web Block into your application screen.

5. Configure the input parameters and implement the required event handlers.

6. Publish your application.

2. Configuration Parameters

• AcceptedTypes (Text): Allowed file extensions separated by commas. Example: pdf,png,jpe?g,docx.

• MaxFiles (Integer): Maximum number of files. Use 0 for unlimited.

• MaxFileSizeMB (Integer): Maximum file size in MB. Use 0 for unlimited.

• QueueHeight (Integer): Maximum height of the file list in pixels. Example: 365.

• Locale (Text): Interface language. Supported values: pt-BR and en-US.

• DarkMode (Boolean): Enables or disables the dark theme.

• ExtendClass (Text): Applies a custom CSS class to the component. Leave empty to preserve its default appearance.

3. Events

OnUploadComplete

Triggered when an individual file finishes browser-side processing.

Returns:

• FileId — Unique file identifier.

• FileName — Original filename.

• Base64 — Base64-encoded file content.

• MimeType — File MIME type.

OnUploadError

Triggered when a file encounters a validation or processing error.

Returns:

• FileName — Name of the affected file.

• ErrorMessage — Description of the error.

OnAllUploadsComplete

Triggered when the file batch finishes processing.

Returns:

• TotalFiles — Total number of files processed.

• CompletedFiles — Successfully processed files.

• FailedFiles — Failed files.

• AllCompleted — Boolean indicating whether the entire batch completed successfully.

OnFileRemoved

Triggered when a file is removed from the upload list.

Returns:

• FileId — Identifier of the removed file.

• FileName — Original filename.

• FileSize — File size in bytes.

4. Working with Base64

The OnUploadComplete event returns file content as Base64-encoded text.

Use the appropriate OutSystems conversion logic to decode the content into Binary Data before storing it.

Important: MultiUpload Flow does not automatically save files to a database or external storage. File persistence must be implemented by the consuming application.

5. Removing Files

Use the FileId parameter to synchronize file removal with your application's file list.

1. Store the FileId received from OnUploadComplete with the corresponding file data.

2. Handle the OnFileRemoved event.

3. Locate the matching record using its FileId.

4. Remove that record from your application's list.

5. If the file was already persisted, perform server-side deletion separately when required.

Using FileId avoids confusion when multiple files have identical names.

6. Customizing the Appearance

Use DarkMode to enable the built-in dark theme.

Use ExtendClass to apply your application's CSS class.

Example — ExtendClass:

custom-upload

Example — Application CSS:

.custom-upload {
    --muf-accent: #8b5cf6;
    --muf-panel: #181826;
    --muf-surface: #242438;
    --muf-t: #ffffff;
    --muf-muted: #b0b0b0;
    --muf-line: #44445c;
    --muf-radius: 6px;
}

Leave ExtendClass empty to use the component's default styling.

7. Important Notes

• File selection and reading take place in the browser.

• Individual file completion does not necessarily indicate successful database storage.

• Large files can increase browser memory usage because their content is encoded in Base64.

• File validation in the browser does not replace server-side validation.

• The consuming application is responsible for authorization, secure storage, and any permanent file deletion.