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
previewTmpl Path to the file's preview .html template String ui/form/element/uploader/preview
template The path to the field’s general .html template. String ui/form/element/uploader/uploader
  • dataType
  • sequentialUploads
  • formData
Configuration passed to jquery-file-upload plugin:
  • type of data
  • sequential data uploads
  • additional form data
  • String
  • Boolean
  • Object
  • json
  • true
  • { 'form_key': window.FORM_KEY }


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

<form xmlns:xsi="">
    <fieldset name="foo">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string"/>
        <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"/>

Source files

Extends abstract: