Upload multiple images
Upload Single File
File Uploader With No Input
Custom File Uploaders
Button With Icon File Uploader
ui5-file-uploaderopens a file explorer dialog and enables users to upload files. The component consists of input field, but you can provide an HTML element by your choice to trigger the file upload, by using the default slot. Furthermore, you can set the property "hideInput" to "true" to hide the input field.
To get all selected files, you can simply use the read-only "files" property. To restrict the types of files the user can select, you can use the "accept" property.
And, similar to all input based components, the FileUploader supports "valueState", "placeholder", "name", and "disabled" properties. For the
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Note: Please make sure you are adding the
.in front on the file type, e.g.
.pngin case you want to accept png's only.
ui5-file-uploaderis in disabled state.
Note: A disabled
ui5-file-uploaderis completely noninteractive.
ui5-file-uploaderwill not be rendered. Only the default slot that is passed will be rendered.
ui5-file-uploaderwill be submitted in an HTML form.
Important: For the
nameproperty to have effect, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the
ui5-file-uploaderso that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
ui5-file-uploaderhas no value.
Available options are:
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the
slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no
slot attribute, goes the the
ui5-file-uploadercontains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
Note: If not specified, a default text (in the respective language) will be displayed.
valueStateMessagewould be displayed, when the
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
description: The current files.