> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# File preview

> Preview file contents inside a UI flow without fully opening the file, using the File Preview component.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/doc_preview.gif)

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](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/12-file_preview_info.png)

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](#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.

> [!NOTE]
>
> PDF documents uploaded to the Media Library must adhere to a maximum file size limit of 10 MB.

> [!WARNING]
>
> 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)

> [!TIP]
>
> Both iOS and Android devices support the share button.

#### iOS

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/doc_preview_ios.gif)

#### Android

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/doc_preview_android.gif)

### 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](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md#styles-tab).

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](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/13-doc_preview_styling.png)

## 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

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/doc_preview_example.gif)

***

## 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](https://docs.flowx.ai/6.x/docs/platform-deep-dive/core-extensions/content-management/documents-plugin/uploading-a-new-document.md). 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](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/file_preview_document_plugin_path_source.png)

***

## Preview files in a collection

When users upload several files at once with a [Multiple File Upload](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/multiple-file-upload.md) 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](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection.md) 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](https://docs.flowx.ai/6.x/docs/building-blocks/actions/upload-file-action.md), 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`.

> [!TIP]
>
> 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](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/19-file_preview_collection_runtime.png)

***

## Event handlers

> [!NOTE]
>
> **Available starting with FlowX.AI 5.9.1.**

The File Preview component supports two scroll-based [event handler](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/event-handlers.md) 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](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/file_preview_document_end_scroll_ev_handlers.png)

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.


## Related topics

- [File download](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/file-download.md)
- [Upload file action](https://docs.flowx.ai/6.x/docs/building-blocks/actions/upload-file-action.md)
- [Collection](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/collection/collection.md)
- [Multiple file upload](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/multiple-file-upload.md)
- [Document processing pipeline](https://docs.flowx.ai/6.x/ai-platform/tutorials/document-processing.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.