Skip to main content
The File Preview component displays a document’s contents directly on a UI Flow page, so users can read it without downloading or opening it separately. The file can come from the Media Library, from the Documents plugin, or from a URL, and it renders inline (optionally in an accordion) or in a modal. This page covers the component’s web and mobile properties and its styling options.

​
Configuring a File preview element

A File Preview element can be configured for both mobile and web applications.

​
File preview properties (web)

File Preview settings with Title, Display mode, Has accordion, Default view, and Source
The settings for the File Preview element include the following properties:
  • Title: Specifies the title of the element. If the file is downloaded or shared, the file name should serve as the title used in the preview component.
  • Subtitle: Allows for the inclusion of a subtitle for the element.
  • Display mode: Depending on the selected display method, the following properties are available:
    • Inline → Has accordion:
      • false: Displays the preview inline without an expand/collapse option.
      • true (Default View: Collapsed): Displays the preview inline with an expand/collapse option, initially collapsed.
      • true (Default View: Expanded): Displays the preview inline with an expand/collapse option, initially expanded.
    • Modal → view icon is enabled
  • Has accordion: Introduces a Bootstrap accordion, facilitating the organization of content within collapsible items. It ensures that only one collapsed item is displayed at a time.
  • Source: where the file comes from.
    • Media Library: a PDF from the project’s Media Library. Pick one with Select from Media Library or add one with Upload to Media Library.
    • Document Plugin path (process user tasks): a Documents plugin downloadPath, such as the one in an upload reply. The renderer adds the Documents plugin base URL, so you don’t need a business rule to build the URL. See Preview an uploaded file.
    • Document Plugin (UI Flows): the Documents plugin object that contains downloadPath, for example an upload reply.
    • URL: a complete, absolute URL, used as-is. The renderer attaches the user’s access token only when the URL ends in download.
  • Value type: for Document Plugin path and URL, sets where the value comes from: Static for a fixed value, or Variable to read it from a data key (Data key). Document Plugin always reads a data key.
PDF documents uploaded to the Media Library must adhere to a maximum file size limit of 10 MB.
It’s worth noting that the inline modal view can raise accessibility issues if the file preview’s height exceeds the screen height.

​
File preview properties (mobile)

Both iOS and Android devices support the share button.

​
iOS

​
Android

​
File preview styling

The File Preview styling property enables you to customize the appearance of the element by adding valid CSS properties. For more information, see the styling documentation. When drag and drop a File Preview element in UI Designer, it comes with the following default styling properties:

​
Sizing

  • Fit W - auto
  • Fit H - fixed / Height - 400 px
File Preview Styles tab with the default sizing

​
File Preview example

Below is an example of a File Preview UI element with the following properties:
  • Display mode - Inline
  • Has accordion - True
  • Default view - Expanded
  • Source - URL, with Value type - Static

​
Preview an uploaded file

When a user uploads a file with a File Upload component, the Documents plugin stores it and replies on its persist reply topic. The reply carries the file’s downloadPath, a relative path such as internal/files/{fileId}/download. Bind File Preview to that path with the Document Plugin path source, and the renderer adds the Documents plugin base URL. (filePath in the same reply is the object path in file storage, MinIO or S3, not a URL.)
1

Receive the upload reply

Configure the upload as described in Creating and uploading a new document. On the node that receives the reply, add an Integration Output data stream (Source: Custom Topic) with the persist reply topic and a key, for example uploadedDocument.
2

Bind File Preview to the downloadPath

On the user task that shows the file, set the File Preview Source to Document Plugin path, Value type to Variable, and Data key to the downloadPath in the upload reply, for example uploadedDocument.downloadPath.
File Preview settings with Source set to Document Plugin Path, Value Type set to Variable, and Data key set to uploadedDocument.downloadPath

​
Preview files in a collection

When users upload several files at once with a Multiple File Upload component, the Documents plugin returns every file in one bulk reply. To show one File Preview per uploaded file, place File Preview inside a Collection bound to that reply. The user stays on the same user task: the files appear after the upload, with no submit.
1

Add the Upload File action

On the user task, add an Upload File action, for example uploadDocs, with these parameters:
  • Topics: the Documents plugin bulk persist topic, by default ai.flowx.plugin.document.trigger.persist.document.bulk.v1.
  • Document Tag: BULK.
  • Folder: the value that groups the files, for example ${processInstanceId}.
  • Headers: {"processInstanceId": ${processInstanceId}, "destinationId": "uploadDocuments", "callbacksForAction": "uploadDocs"}. destinationId is the name of the user task node, and callbacksForAction is the name of the Upload File action.
In the node’s Actions list, drag the Upload File action above any mandatory manual action, such as the saveData action the user task creates. The process engine rejects the upload while a mandatory action placed above it hasn’t run.
2

Connect the Multiple File Upload component

On the Multiple File Upload component, add an event handler with Event type CLICK and Action type Upload, and select the Upload File action.
3

Receive the bulk reply

On the same node, add an Integration Output data stream with Source set to Custom Topic, the bulk reply topic ai.flowx.engine.receive.plugin.document.persist.document.bulk.results.v1, and a key, for example docs. The reply stores the files as a list under docs.documents, one entry per file, each with its own downloadPath.
4

Send the reply to the user task

Add a child action under the Upload File action, of type Send data to user interface, with the message {"docs": ${docs}}. It runs when the bulk reply arrives and refreshes the user task with the uploaded files.
5

Bind the collection and File Preview

Add a Collection with source docs.documents, and a collection prototype with identifier key documentType and value BULK. Inside the prototype, add a File Preview with Source set to Document Plugin path, Value type set to Variable, and Data key set to downloadPath.
Inside a collection prototype, keys resolve against the current item, so the data key is downloadPath. The key suggestions list full paths such as docs.documents.downloadPath: type the relative key instead of picking a suggestion.
Upload documents user task at runtime with a Multiple File Upload drop zone and a File Preview of the uploaded invoice

​
Event handlers

Available starting with FlowX.AI 5.9.1.
The File Preview component supports two scroll-based event handler triggers, handled by the web and Android renderers:
  • On Scroll: fires as the user scrolls within the previewed document.
  • On Document End: fires when the user reaches the end of the document.
File Preview scroll and document end event handlers
A common use is consent and disclosure: keep a Submit or Accept action hidden or disabled until an On Document End handler confirms the user reached the end of the document. The handler can be a simple local script that sets a flag enabling the action.
Last modified on October 30, 2026