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
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    ...
    <fieldset name="foo">
        ...
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string"/>
            </item>
        </argument>
        <field name="bar">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Sound Check</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>
        </field>
    </fieldset>
</form>

Result

FileUploader Component example

Source files

Extends abstract:

Updated