# Attachments - UploadFile

File attachment component for the application

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/lGDkyNrwKf6pOElPJKmk/3k_files/image2025-5-16_8-55-39.png)

## Component properties

<table><thead><tr><th>Eximee Designer property</th><th width="200.9832763671875">Attribute name in the Source</th><th>Description</th></tr></thead><tbody><tr><td><strong>Maximum number of attached files</strong> (section <strong>Basic properties</strong>)</td><td>numberOfUploadingFiles</td><td>Number of files that can be uploaded in the component, default 1.</td></tr><tr><td><strong>Number of required attachments</strong> (section <strong>Data quality</strong>)</td><td>requiredCount</td><td>The required number of files to attach - default 0. If 0, no file may be attached; if greater, then depending on that number.</td></tr><tr><td><strong>Text displayed when required attachments are missing</strong> (section <strong>Data quality</strong>)</td><td>requiredCountError</td><td>Mandatory message, required if the property is defined <strong>Number of required attachments</strong> (requiredCount).</td></tr><tr><td><strong>Maximum file size</strong> (section <strong>Data quality</strong>)</td><td>maxFileSize</td><td>Maximum file size in KB. Default 1024 KB.</td></tr><tr><td><strong>Maximum total size of all files</strong> (section <strong>Data quality</strong>)</td><td>maxTotalFilesSize</td><td>Maximum size of all attached files in KB. Default 10240 KB.</td></tr><tr><td><strong>Show list of allowed extensions</strong> (section <strong>Interactions</strong>)</td><td>showExtensionList</td><td>Enabling the option to display information about acceptable formats and the maximum size of the uploaded file (option is disabled by default). Example information: "Allowed attachment formats: pdf (max. 1 MB)"</td></tr><tr><td><strong>Enable image compression</strong> (section <strong>Interactions</strong>)</td><td>imageCompressionEnabled</td><td>Ability to compress images (default value "false").</td></tr><tr><td><strong>Maximum width of photo from camera</strong> (section <strong>Interactions</strong>)</td><td>maxWebcamWidth</td><td>Feature availability depends on license and may not be available in all deployments. Maximum width of a photo from the camera in pixels.</td></tr><tr><td><strong>Maximum height of photo from camera</strong> (section <strong>Interactions</strong>)</td><td>maxWebcamHeight</td><td>Feature availability depends on license and may not be available in all deployments. Maximum height of a photo from the camera in pixels.</td></tr><tr><td><strong>Ability to attach a photo taken with the camera</strong> (section <strong>Interactions</strong>)</td><td>webcamEnabledCondition</td><td>Feature availability depends on license and may not be available in all deployments. Condition enabling/disabling the ability to upload a photo taken with the device's built-in camera.</td></tr><tr><td><strong>List of allowed file extensions</strong> (section <strong>Security</strong>)</td><td>validExtensionList</td><td>Formats of allowed file extensions, listed comma-separated, e.g.: jpg, jpeg, png, pdf.</td></tr><tr><td><strong>Additional validation of PDF files</strong> (section <strong>Security</strong>)</td><td>validateContent</td><td>Additional validation of the file regarding PDF FORMAT, not just the file extension.</td></tr><tr><td><strong>Regular expression to validate the file name</strong> (section <strong>Security</strong>)</td><td>allowedFilenameRegexp</td><td>Regular expression checking allowed file names. It is possible to override the default validation error message by adding the application translation key <strong>iew.gwtupload.invalid_filename</strong> and setting a new translation value.</td></tr><tr><td><strong>Ability to add descriptions to attached files</strong> (section <strong>Other</strong>)</td><td>attachmentWithDescription</td><td>Feature availability depends on license and may not be available in all deployments. Displaying a description field for each added attachment. Property is disabled by default (set to "false").</td></tr><tr><td><strong>Maximum number of characters for attachment descriptions</strong> (section <strong>Other</strong>)</td><td>attachmentDescriptionMaxLength</td><td>Feature availability depends on license and may not be available in all deployments. Maximum length of the description that can be entered for an added attachment. Default 120 characters.</td></tr><tr><td><strong>Button label</strong> (section <strong>Other</strong>)</td><td>buttonLabel</td><td>Feature availability depends on license and may not be available in all deployments. Text displayed on the add file button.</td></tr><tr><td><strong>Field description</strong> (section <strong>Other</strong>)</td><td>description</td><td>Feature availability depends on license and may not be available in all deployments. Description text.</td></tr><tr><td><strong>Enable image compression</strong> (section <strong>Other</strong>)</td><td></td><td>Feature availability depends on license and may not be available in all deployments. Property allowing reduction of attached images.</td></tr><tr><td><strong>Document type - advanced integration</strong> (section <strong>Other</strong>)</td><td>documentType</td><td>Technical field used in advanced integration (requires additional implementation). Feature availability depends on license and may not be available in all deployments.</td></tr><tr><td><strong>Contact number - advanced integration</strong> (section <strong>Other</strong>)</td><td>contractNumber</td><td>Technical field used in advanced integration (requires additional implementation). Feature availability depends on license and may not be available in all deployments.</td></tr><tr><td><strong>Process type</strong> (section <strong>Other</strong>)</td><td>processType</td><td>Name of the process passed to the service that stores the attached file in an external resource. Feature availability depends on license and may not be available in all deployments.</td></tr><tr><td><strong>Calling external validator for the added file</strong></td><td>singleFileValidator</td><td>Calling an external validator for the added file. The validator is called when attempting to add each file (if the attachment fails validation, it is rejected). The property must be added from the XML Source level.</td></tr></tbody></table>

> More information about component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

## Component usage

{% stepper %}
{% step %}

### Adding a file

To import a file using the component **Attachments**, click the button **Add file**. This will open the system file chooser. After selecting a file it will be imported. After the import finishes the file name will appear in the list.
{% endstep %}

{% step %}

### Deleting a file

Imported files can be removed by clicking the **Delete** button visible next to the file name.
{% endstep %}
{% endstepper %}

![Illustration 1. Example appearance of the component on the application](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/TKEkbYuWJS7tpFxU1XIU/3k_files/image2025-5-16_8-56-37.png)

<p align="center"></p>

![Illustration 2. Example appearance of the component with an uploaded attachment](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/3jM4l4r1skVXTpi54W7V/3k_files/image2025-5-16_8-59-42.png)

<p align="center"></p>

## Description for attached files

{% hint style="info" %}
The availability of functionality depends on the license and may not be available in all deployments.
{% endhint %}

You can add a description to the attached file. To do this, check the field **Ability to add descriptions to attached files** (attachmentWithDescription) (the field is disabled by default). The length of the added description can be set in the field **Maximum number of characters for attachment descriptions** (attachmentDescriptionMaxLength).

## Component input parameters

| Property               | Description                                         |
| ---------------------- | --------------------------------------------------- |
| **maxFileSize**        | Maximum file size in bytes                          |
| **validExtensionList** | List of allowed extensions (one extension per line) |
| **maxWebcamWidth**     | Maximum width of the camera photo in pixels         |
| **maxWebcamHeight**    | Maximum height of the camera photo in pixels        |

## Component output parameters

| Property           | Description                                                                                                          |
| ------------------ | -------------------------------------------------------------------------------------------------------------------- |
| **totalFilesSize** | Sum of sizes of all files added using the uploader component                                                         |
| **fileNames**      | Retrieves the names of files added to the control. Data is returned in JSON format: \["fileName1", "fileName2", ...] |
| **externalIds**    | Identifiers of files from an external service, similarly to above returned in JSON format.                           |

If we want to display, for example in a Text Field component, the sum of sizes of all files, we can do it using the property **DATA SOURCE FROM ANOTHER FIELD** (valueSourceId) of the component that should display the value. For this purpose the property **DATA SOURCE FROM ANOTHER FIELD** we assign the following value: `GesUploadFile1$totalFilesSize` where `GesUploadFile1` is the identifier of the attachment component, and `totalFilesSize` is the property of that component whose value will be entered. Overwriting the value additionally requires listening to the attachment component.

## Defining the action to clear the component

For the component it is possible to define on the main application template an action that clears the component of the attached file. More information in [Actions](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/logika-biznesowa/przeplywy/akcje).

{% hint style="info" %}
Demo application: demoUploadFile
{% endhint %}

{% hint style="info" %}
&#x20;♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}
