---
title: "Form File Upload Element"
description: "The Form File Upload Element can be used to enable User to upload one or multiple Files, like an Image or an Document."
path: https://www.eonshowroom.eon.com/en/specials/form-elements/form-data-input/form-file-upload-element.html
lastModified: 2025-11-05T13:49:33.629Z
---

# Form File Upload Element

# Form File Upload Element

### Information requested

Send us an Image

Info: Configured to accept only one File of Type Image, and have max File Size of 3MB.

[How to Configure](#how-to)

### Description

The Form File Upload Element can be used to enable User to upload one or multiple Files, like an Image or a Document.

- One or Multiple Files can be configured
- File Type can be restricted
- Can be made required
- Uploaded Files get attached to Support Mail only (not to Customer Mail)

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-file-upload--interactive)

### Inspirations

### Information requested

Send us PDF-Documents

Info: Configured to accept one or multiple Files of PDF, and have max File Size of 2MB per File and max 4MB in Sum.

### Usage Rules & Features

##### Features

- Regular File Types can be choosen for Upload Restriction
- Uploaded Files get attached to Support Mail only (not to Customer Mail)

##### Properties

- Can be made mandatory
- Add Info, Error, and Required Message
- Set maximale File Size per File and as Sum of File Sizes

##### Design

- Single or Multi File Upload is possible

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | no |
| 4 | no |
| 5 | no |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | no |

##### DO's

- Add Hint Text about maximum File Size and excepted File Types
- After Publishing, check Form sending works as expected
- Ensure Mulesoft Integration and Configuration is done

[Info Icon Key: info-icon-1]

[Info Icon Aria Label: Mulesoft & MT Captcha Integration]

[Info Icon Content Type: Experience fragment]

[Info Icon Content Start: info-icon-1]

##### Mulesoft & MT Captcha

Mulesoft and MT Captcha are both needed for Forms.

Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form.

[Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html)

[Info Icon Content End: info-icon-1]

##### DONT's

- Do not configure a bigger File Size per File than the allowed Sum of File Sizes
- Try not to use it outside of Form Container - Any Kind of Form Element can be used only inside a Form Container
- Do not use it in smaller Grid then 6 Column Grid
- Do not use it in Form Grid

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_file-upload_properties_v2%3A3-4?fmt=webp-alpha)

### Form File Upload

With the Form File Upload one or multiple Files can be uploaded. Therefore, it needs a Name.

Furthermore, it is possible to set a Maximum File Size per File in MB (from 1 to 4 MB), as well as a Maximum Sum of File Sizes in MB (from 1 to 4 MB), allowing multiple Files.

Beside that, Editor can decide to show a Browse Button and to allow multiple Files to be uploaded.

In File Type Field, Editor needs to enter allowed File Name Extensions, like ".pdf" or ".jpg", etc., or Stings like e.g. "audio/*" (meaning "any Audio File), "video/*" (meaning "any Video File), or "image/*" (meaning "any Image File).

Beside that, an Info or Error Message can also be provided. To improve clarity and usability, the label “Help Message” has been renamed to “Help Message (e.g. allowed file type and/or max file size)”, and the label “Error Message” has been renamed to “File Type Error Message”.

The Help Message field can include additional hints such as: Attachments are automatically sent to both support and the customer with the HTML email—no need to include them in the template. Emails with attachments may be slightly delayed due to Mailjet processing. Total attachment size (of all file uploads) must not exceed 8 MB.

### Keep in Mind

The Form File Upload is the only Form Element which does not have an Element Name. It is not needed, because uploaded **Files will be attached** to the sended Mail automatically **to Support Mail** and must not be included in Mail Template or similar.

Furthermore, ensure to not configure a bigger File Size per File than the allowed Sum of File Sizes.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_file-upload_constraints%3A4-3?fmt=webp-alpha)

### Configure Constraints

In Constraints Tab of Date Picker, Editor can choose if this Field should be required. If so, also providing a Required Message is advisable.