# 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 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>The number of files that can be uploaded in the component, default is 1.</td></tr><tr><td><strong>Required number of attachments</strong> (section <strong>Data quality</strong>)</td><td>requiredCount</td><td>Required number of files to attach - default is 0. If 0, no files need to be attached; if greater, then according to the given number.</td></tr><tr><td><strong>Text displayed when there are no required attachments</strong> (section <strong>Data quality</strong>)</td><td>requiredCountError</td><td>Requiredness message, required if the property is defined <strong>Required number of 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 is 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 is 10240 KB.</td></tr><tr><td><strong>Show the list of available extensions</strong> (section <strong>Interactions</strong>)</td><td>showExtensionList</td><td>Enables displaying information about allowed formats and the maximum size of the attached file (by default this option is disabled). 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 webcam photo width</strong> (section <strong>Interactions</strong>)</td><td>maxWebcamWidth</td><td>Availability of the functionality depends on the license and may not be available in all deployments. Maximum webcam photo width in pixels.</td></tr><tr><td><strong>Maximum webcam photo height</strong> (section <strong>Interactions</strong>)</td><td>maxWebcamHeight</td><td>Availability of the functionality depends on the license and may not be available in all deployments. Maximum webcam photo height 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>Availability of the functionality depends on the 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>Allowed file extension formats, 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 file validation for the pdf FORMAT, not just the extension itself.</td></tr><tr><td><strong>Regular expression for validating 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 key <strong>iew.gwtupload.invalid_filename</strong> to the application translations and setting a new translation value.</td></tr><tr><td><strong>Whitelist of characters</strong> (section <strong>Security</strong>)</td><td>extraWhitelistCharacters</td><td>To allow uploading files containing non-standard characters, add them to the whitelist of allowed characters, e.g.: (). This configuration extends the webforms.xml configuration ...</td></tr><tr><td><strong>Ability to add descriptions to attached files</strong> (section <strong>Other</strong>)</td><td>attachmentWithDescription</td><td>Availability of the functionality depends on the license and may not be available in all deployments. Displays a description field for each added attachment. By default the property is disabled (set to "false").</td></tr><tr><td><strong>Maximum number of characters for descriptions of attached files</strong> (section <strong>Other</strong>)</td><td>attachmentDescriptionMaxLength</td><td>Availability of the functionality depends on the license and may not be available in all deployments. Maximum length of the description that can be entered for an added attachment. Default is 120 characters.</td></tr><tr><td><strong>Button label</strong> (section <strong>Other</strong>)</td><td>buttonLabel</td><td>Availability of the functionality depends on the license and may not be available in all deployments. Text displayed on the file upload button.</td></tr><tr><td><strong>Field description</strong> (section <strong>Other</strong>)</td><td>description</td><td>Availability of the functionality depends on the 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>Availability of the functionality depends on the license and may not be available in all deployments. Property allowing attached images to be resized.</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). Availability of the functionality depends on the 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). Availability of the functionality depends on the 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>Process name passed to the service that saves the attached file in an external resource. Availability of the functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Calling an 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 does not pass validation, it is rejected). The property should 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)

## Using the component

{% stepper %}
{% step %}
**Adding a file**

To import a file using the **Attachments**, click the **Add file**button. The system file picker window will then open. After selecting a file, it will be imported. Once the import is complete, the file name will appear on the list.
{% endstep %}

{% step %}
**Deleting a file**

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

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

![Figure 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)

{% hint style="info" %}
To the component **Attachments** you can attach a file with any extension.
{% endhint %}

## Description for attached files

{% hint style="info" %}
The availability of the 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 **Ability to add descriptions to attached files** (attachmentWithDescription) field (by default the field is disabled). The length of the added description can be set in the field **Maximum number of characters for descriptions of attached files** (attachmentDescriptionMaxLength).

## Component input parameters

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

## Component output parameters

| Property           | Description                                                                                                          |
| ------------------ | -------------------------------------------------------------------------------------------------------------------- |
| **totalFilesSize** | The sum of the 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**    | File identifiers from the external service, returned in JSON format as above.                                        |

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

## Defining component clearing actions

For the component, it is possible to define on the main application template a clearing action for the component from 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" %}
♿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 %}