File Uploader Component

Overview

UI File Uploader component is an adapter for jQuery-File-Upload plugin used in Magento. Component is used to integrate file upload functionality with UI components.

Component elements

  • 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

Component options

Title Description Required For Correct Work Type Default Value
previewTmpl Path to the files' preview template No String Magento_Ui_module_dir/view/base/web/templates/form/element/uploader/preview.html
maxFileSize Defines maximum size of a file (in bytes No Number Infinite
isMultipleFiles Flag which indicates whether multiple files can be uploaded or not No Boolean false
allowedExtensions List of allowed file extensions No String/Array *
dropZone CSS selector of a drop zone element relative to a file input element No String [data-role=drop-zone]
uploaderConfig Configuration which will be passed to jquery-file-upload plugin Yes Object
uploaderConfig.url Route to server controller which will handle file uploading process Yes String null

Integration

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">
        ...
        <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>