PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We
strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
File component
The File component implements the HTML <input type="file"> form field.
Configuration options
| Option | Description | Type | Default |
|---|---|---|---|
component |
The path to the component’s JS constructor in terms of RequireJS. | String | Magento_Ui/js/form/element/media |
label |
Label to be displayed in the field. | String | '' |
links.value |
Links the component’s value property with provider using the declared in the dataScope property of the parent component. |
Boolean | '' |
disabled |
Initial component’s state. When set to true, users cannot take action on the element. |
Boolean | false |
visible |
Initial component’s visibility. When set to false, the display: none CSS style is added to the component’s DOM block. |
Boolean | true |
Source files
Extends Abstract:
app/code/Magento/Ui/view/base/web/js/form/element/media.jsapp/code/Magento/Ui/view/base/web/templates/form/element/media.htmlapp/code/Magento/Ui/view/base/web/templates/form/field.html
Examples
Integrate File component with Form component
This is an example of how the File component integrates with the Form component:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form>
...
<fieldset>
...
<file name="file_example">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">File Field</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="path/to/controller"/>
</item>
</item>
</argument>
</file>
</fieldset>
</form>
Result
