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.


  • Constructor: <Magento_Ui_module_dir>/view/base/web/js/form/element/file-uploader.js
  • JQuery file upload plugin: jquery/fileUploader/jquery.fileupload-fp
  • Default template: <Magento_Ui_module_dir>/view/base/web/templates/form/element/uploader/uploader.html
  • Preview template: <Magento_Ui_module_dir>/view/base/web/templates/form/element/uploader/preview.html

Configuration settings

Extends all abstract configuration.

Fileuploader-specific configuration:

Title Description Type Default Value
allowedExtensions List of allowed file extensions. For example, 'jpg jpeg gif png svg'. If set to "false" - then no extion 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"/>