FileUploader component
Overview
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.
Structure
- 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
|
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
|
template
|
The path to the field’s general .html
template.
|
String |
ui/form/element/uploader/uploader
|
uploaderConfig
|
Configuration passed to jquery-file-upload plugin:
|
Object
|
|
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>