This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

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