UI5 Web Components
Search

File Uploader

v1.0.0-rc.6
@ui5/webcomponents
<ui5-file-uploader>

Upload multiple images

Upload Images 
<ui5-file-uploader id="fileuploader1" accept="image/*" multiple="true">
	<ui5-button icon="upload">Upload Images</ui5-button>
</ui5-file-uploader>
<script>
	const fileUploader = document.querySelector("#fileuploader1"),
		resultDiv = document.querySelector("#result");
	fileUploader.addEventListener("change", event => {
		const files = event.target.files;

		if (!files.length) {
			resultDiv.innerHTML = "<ui5-label>No Files Selected</ui5-label>";
		} else {
			resultDiv.innerHTML = "";

			for (let i = 0; i < files.length; i++) {
				const img = document.createElement("img");
				img.src = URL.createObjectURL(files[i]);
				img.width = 100;
				img.height = 100;
				img.onload = () => {
					URL.revokeObjectURL(img.src);
				}
				resultDiv.appendChild(img);
			}
		}
	})
</script>

Upload Single File

Upload Single File 
<ui5-file-uploader>
	<ui5-button>Upload Single File</ui5-button>
</ui5-file-uploader>

File Uploader With No Input

Upload File 
<ui5-file-uploader hide-input>
	<ui5-button>Upload File</ui5-button>
</ui5-file-uploader>

Custom File Uploaders

Upload File 
<ui5-file-uploader hide-input>
	<ui5-avatar icon="upload"></ui5-avatar>
</ui5-file-uploader>

<ui5-file-uploader hide-input>
	<ui5-badge>Upload File</ui5-badge>
</ui5-file-uploader>

Button With Icon File Uploader

Upload Upload 
<ui5-file-uploader>
	<ui5-button icon="upload">Upload</ui5-button>
</ui5-file-uploader>
<ui5-file-uploader>
	<ui5-button icon="upload" icon-end>Upload</ui5-button>
</ui5-file-uploader>
<ui5-file-uploader>
	<ui5-button icon="upload" icon-only></ui5-button>
</ui5-file-uploader>

Overview

The ui5-file-uploader opens 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 ui5-file-uploader

ES6 Module Import

import "@ui5/webcomponents/dist/FileUploader.js";

Properties/Attributes

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.

Name
Type
Default Value
Description
accept
string
""
Comma-separated list of file types that the component should accept.

Note: Please make sure you are adding the . in front on the file type, e.g. .png in case you want to accept png's only.
disabled
boolean
false
Defines whether the component is in disabled state.

Note: A disabled component is completely noninteractive.
files (readonly)
FileList
FileList of all selected files.
hideInput
hide-input
boolean
false
If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered.
multiple
boolean
false
Allows multiple files to be chosen.
name
string
""
Determines the name with which the component will be submitted in an HTML form.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
placeholder
string
""
Defines a short hint intended to aid the user with data entry when the component has no value.
value
string
""
Defines the name/names of the file/files to upload.
valueState
value-state
ValueState
"None"
Defines the value state of the component.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

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 default slot.

Slot
Type
Description
default
HTMLElement [0..n]
By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
valueStateMessage
HTMLElement [0..n]
Defines the value state message that will be displayed as pop up under the component.

Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed, when the component is in Information, Warning or Error value state.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Event is fired when the value of the file path has been changed. Note: Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.
files
type: FileList
description: The current files.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel