--- title: "File Preview Control" slug: "file-preview-control" updated: 2025-12-11T00:58:13Z published: 2025-12-11T00:58:13Z canonical: "docs.processmaker.com/file-preview-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # File Preview Control The File Preview control allows users to preview files previously uploaded in a case through a [File Upload control](/v1/docs/file-upload-control). To add a File Preview control in a Screen, place it where you want the preview to appear, then set the **Name** to match the File Upload control that was used to upload the file. > This control is only available for the following Screen types: > > - Display type > - Form type > > See [Screen Types](/v1/docs/screens#screen-types). For example of using the File Preview control, see [Preview or Download Multiple Files Uploaded from a Previous Task](/v1/docs/example-preview-or-download-multiple-files-uploaded-from-a-previous-task). --- ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the [Screen](/v1/docs/screens): 1. [Create a new Form-type or Display-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Files** category, and then locate the **File Preview** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b2ea1a74-a54b-4431-bd37-b8e9999b3d9e.png). 3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/84d97769-32fb-483e-938b-09648d5627d4.png) 4. Configure the File Preview control. See [Settings](/v1/docs/file-preview-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). When used in a published process, the **File Preview** control will display the file configured in its settings. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/146e060c-b9ca-4c61-937f-05d5c4ba0e01.png) > [!NOTE] > The **File Preview** controls supports the following file formats: > > - **Documents:** PDF, ODS, ODP, and ODT > - **Images:** JPG, JPEG, PNG, GIF > - **Audio:** M4A and MP3 > - **Video:** MP4 and MOV > > (**Note**: MOV files are only supported in Safari and won’t render in other browsers) --- ## Settings The File Preview control has the following settings in the Properties Panel: - [**Variable** panel](/v1/docs/file-preview-control#variable-panel-settings) - [**Configuration** panel](/v1/docs/file-preview-control#configuration-panel-settings) - [**Advanced** panel](/v1/docs/file-preview-control#advanced-panel-settings) --- ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Variable Name Edit the default **Variable Name** setting value for this control if necessary. The **Variable Name** setting value represents data in this control during Requests. Ensure that the **Variable Name** setting value is a unique name from other controls in this [Screen](/v1/docs/screens) and contains at least one letter. This is a required setting. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/2c8b15e9-bd00-409e-a785-3645cd3e1e05.png) Use the **Variable Name** setting value to reference this value in [**Visibility Rule** setting expressions](/v1/docs/file-preview-control#visibility-rule). See [best practices](/v1/docs/screen-design-best-practices#naming-request-variables-for-processmaker-screen-controls) when editing a Request variable name. --- ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### File Name The File Preview control displays files previously uploaded in a case through a [File Upload](/v1/docs/file-upload-control) control. To enable file preview, enter the [**Name** setting](/v1/docs/file-upload-control#name) value of the File Upload control associated with the file you want to preview. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/58dd81e1-baa0-4c09-941c-0d9ee8cddbc3.png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d68fbb61-b6db-457f-9c79-67a49610cd24.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/a664876c-cf75-4f32-8670-f7c0af2ef844.png) #### CSS Selector Name Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/a8f28b83-2dc8-4c3e-921d-69a46e84b348.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)