File Viewer
The File Viewer element provides an inline or modal document preview experience directly within a form. Rather than forcing users to download a fileโฆ
The File Viewer element provides an inline or modal document preview experience directly within a form. Rather than forcing users to download a file to inspect it, the File Viewer renders the document in place โ supporting file types like PDF โ with customizable messaging for loading, empty, and error states.
The src attribute accepts a URL, base64 string, or file reference, making it easy to display files uploaded earlier in the same form, documents retrieved from a process, or static reference materials. The viewer can render inline (embedded directly on the form surface) or in a modal popup โ giving you control over how much space the preview consumes.
Key Use Cases
โขย ย ย ย ย ย ย Displaying a contract or policy PDF for the user to review before signing or approving
โขย ย ย ย ย ย ย Showing a document generated by a Procesio process (e.g., a quote or invoice) for review
โขย ย ย ย ย ย ย Previewing a file immediately after it is uploaded in a File Upload element
โขย ย ย ย ย ย ย Embedding reference materials (SOPs, specifications) alongside the form fields that reference them
โขย ย ย ย ย ย ย Using modal mode to keep the form layout compact while still offering a full-screen view
Runtime API โ Attributes in Procesio Forms
All attributes below are accessible and modifiable at runtime via the element's data model in Procesio Forms.
| API Name | Description | Type | Default | Notes |
|---|---|---|---|---|
| label | Display label for the file viewer | string | โ | โ |
| tooltip | Help text shown alongside the label | string | โ | โ |
| visible | Controls element visibility | boolean | true | โ |
| src | File source โ URL, base64 string, or file reference | string|file | โ | Updatable at runtime |
| loadingviewmessage | Message shown while the file is loading | string | loading | โ |
| openviewmessage | Message shown as a prompt to open the viewer | string | click to open | โ |
| emptyviewmessage | Message shown when no file source is set | string | field source not set | โ |
| failedviewmessage | Error message shown if loading fails | string | file is invalid... | โ |
| allowedfiletypes | Permitted file types for display | string[] | โ | |
| viewertype | How the viewer is presented | string | โ | inline, modal |
| name | Unique element name | string | โ | โ |
| id | Unique element ID | string | โ | โ |
For support, please join our Discord community for further assistance and support.
Image
The Image element embeds a visual asset directly within a form. It can display any image from a web URL, a base64-encoded data string, or a fileโฆ
Icon
The Icon element renders a single Material Icon within a form โ a small, universally recognizable symbol that can communicate status, category,โฆ