Adobe Commerce 2.3 reached end of support in September 2022.

FileUploader component

The File Uploader component is an adapter for the jQuery-File-Upload plugin used in Magento. This component integrates file upload functionality with UI components.

Configuration options

Title Description Type Default Value
allowedExtensions List of allowed file extensions. For example, 'jpg jpeg gif png svg'. If set to “false” - then no extension is allowed, “true” - any extension is allowed. Boolean/String false
component The path to the component’s JS constructor in terms of RequireJS. String 'Magento_Ui/js/form/element/file-uploader'
dropZone CSS selector of a drop zone element. String [data-role=drop-zone]
isMultipleFiles Defines whether multiple files can be uploaded. Boolean false
maxFileSize Defines the maximum allowed file size in bytes. Boolean/Number false
placeholderType Defines the preview type. (When set to document, the file information is displayed.) document | image | video document
previewTmpl Path to the file’s preview .html template String ui/form/element/uploader/preview
uploaderConfig Configuration passed to jquery-file-upload plugin. Object {dataType: 'json', sequentialUploads: true, formData: {'form_key': window.FORM_KEY}}

Examples

Integrate FileUploader component with Form component

Here is an example of how File Uploader component integrates with Form component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    ...
    <fieldset name="foo">
        ...
        <settings>
            <label translate="true">Foo</label>
            <collapsible>true</collapsible>
            <opened>true</opened>
        </settings>
        <field name="bar" formElement="fileUploader">
            <settings>
                <label translate="true">Sound Check</label>
            </settings>
            <formElements>
                <fileUploader>
                    <settings>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">path/to/controller</param>
                        </uploaderConfig>
                    </settings>
                </fileUploader>
            </formElements>
        </field>
    </fieldset>
</form>

Result

FileUploader Component example

Source files

Extends abstract: