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>