ui-secondary-uploader.md

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

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	/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:

{% highlight xml %}

... ... Sound Check true fileUploader {% endhighlight %}