layout | group | subgroup | title | menu_title | menu_node | menu_order | version | github_link | redirect_from |
---|---|---|---|---|---|---|---|---|---|
default |
UI Library |
C_Listing/Grid Secondary Components |
File Uploader Component |
File Uploader Component |
13 |
2.0 |
ui-components/ui-secondary-uploader.md |
/guides/v2.0/ui-library/ui-secondary-uploader.html |
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.
- Constructor:
app/code/Magento/Ui/view/base/web/js/form/element/file-uploader.js
- JQuery file upload plugin:
jquery/fileUploader/jquery.fileupload-fp
- Default template:
app/code/Magento/Ui/view/base/web/templates/form/element/uploader/uploader.html
- Preview template:
app/code/Magento/Ui/view/base/web/templates/form/element/uploader/preview.html
Title | Description | Required For Correct Work | Type | Default Value |
---|---|---|---|---|
previewTmpl | Path to the files' preview template | No | String | app/code/Magento/Ui/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 |
Here is an example of how File Uploader component integrates with Form component:
{% highlight xml %}
... ... Sound Check true fileUploader {% endhighlight %}