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 |
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 |
uploaderConfig |
Configuration passed to jquery-file-upload plugin. | Object | {dataType: 'json', sequentialUploads: true, formData: {'form_key': window.FORM_KEY}} |
Examples
Integrate FileUploader component with Form component
Here is an example of how File Uploader component integrates with Form component:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
Result
Source files
Extends abstract
: