PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
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
24
25
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
...
<fieldset name="foo">
...
<settings>
<label translate="true">Foo</label>
<collapsible>true</collapsible>
<opened>true</opened>
</settings>
<field name="bar" formElement="fileUploader">
<settings>
<label translate="true">Sound Check</label>
</settings>
<formElements>
<fileUploader>
<settings>
<uploaderConfig>
<param xsi:type="string" name="url">path/to/controller</param>
</uploaderConfig>
</settings>
</fileUploader>
</formElements>
</field>
</fieldset>
</form>
Result
Source files
Extends abstract
: