Adobe Commerce 2.3 reached end of support in September 2022.

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:

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

File Component example