FileUploader component | Adobe Commerce Developer Guide

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:

<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: