UploadCollection

v1.0.0-rc.7
@ui5/webcomponents-fiori
<ui5-upload-collection>

UploadCollection

Uploaded (2) Add new files and press to start uploading pending files: Start
Uploaded By: David Keane · Uploaded On: 2014-07-26 · File Size: 35 KB Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
<ui5-upload-collection id="uploadCollection">
	<div slot="header" class="header">
		<ui5-title>Uploaded (2)</ui5-title>
		<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
		<ui5-button id="startUploading">Start</ui5-button>
		<div class="spacer"></div>
		<ui5-file-uploader id="fileUploader" hide-input multiple>
			<ui5-button icon="add" design="Transparent"></ui5-button>
		</ui5-file-uploader>
	</div>
	<ui5-upload-collection-item
		file-name="LaptopHT-1000.jpg"
		file-name-clickable
		upload-state="Complete"
	>
		<img src="../../../assets/images/HT-1000.jpg" slot="thumbnail">
		Uploaded By: David Keane · Uploaded On: 2014-07-26 · File Size: 35 KB
	</ui5-upload-collection-item>
	<ui5-upload-collection-item
		file-name="Notes.txt"
		upload-state="Complete"
	>
		<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
		Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
	</ui5-upload-collection-item>
</ui5-upload-collection>	

<script>
	const createThumbnail = fileName => {
		const icon = document.createElement("ui5-icon");
		icon.name = "document";
		icon.slot = "thumbnail";
		return icon;
	};

	const createUCI  = file => {
		const uci = document.createElement("ui5-upload-collection-item");
			description = document.createTextNode("Last modified: " + file.lastModifiedDate + ", size: " + file.size);

		uci.appendChild(createThumbnail(file.name));
		uci.appendChild(description);
		uci.file = file;
		uci.fileName = file.name;
		return uci;
	}

	fileUploader.addEventListener("ui5-change", event => {
		const files = event.detail.files;

		for (let i = 0; i < files.length; i++) {
			uploadCollection.appendChild(createUCI(files[i]));
		}
	});

	startUploading.addEventListener("click", event => {
		uploadCollection.items.forEach(item => {
			// if there is a file ready to be uploaded send request
			if (item.uploadState === "Ready" && item.file) {
				const oXHR = new XMLHttpRequest();
				
				oXHR.open("POST", "/upload", true);
				oXHR.onreadystatechange  = function () {
					if (this.status !== 200) {
						item.uploadState = "Error";
					}
				};
				oXHR.send(item.file);
				item.uploadState="Uploading";
			}
		});
	});
</script>
	

UploadCollection With File Renaming Enabled

Attachments(2)
Uploaded By: David Keane · Uploaded On: 2014-07-26 · File Size: 35 KB Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
<ui5-upload-collection id="uploadCollectionWithRenaming">
	<div slot="header" class="header">
		<ui5-title>Attachments(2)</ui5-title>
	</div>
	<ui5-upload-collection-item
		file-name="LaptopHT-1000.jpg"
		file-name-clickable
		type="Detail"
		upload-state="Complete"
	>
		<img src="../../../assets/images/HT-1000.jpg" slot="thumbnail">
		Uploaded By: David Keane · Uploaded On: 2014-07-26 · File Size: 35 KB
	</ui5-upload-collection-item>
	<ui5-upload-collection-item
		file-name="Notes.txt"
		type="Detail"
		upload-state="Complete"
	>
		<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
		Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
	</ui5-upload-collection-item>
</ui5-upload-collection>	

<script>
	uploadCollectionWithRenaming.addEventListener("ui5-rename", event => {
		alert("Rename event:" + event.target.fileName);
	});
</script>
	

UploadCollection With Different Uploading States of Items

Upload States
uploadState="Complete" uploadState="Uploading" uploadState="Error" uploadState="Ready" (default)
<ui5-upload-collection id="uploadCollectionStates">
	<div class="header" slot="header">
		<ui5-title>Upload States</ui5-title>
	</div>
	<ui5-upload-collection-item
		file-name="LaptopHT-1000.jpg"
		upload-state="Complete"
	>
		<img src="../../../assets/images/HT-1000.jpg" slot="thumbnail">
		uploadState="Complete"
	</ui5-upload-collection-item>
	<ui5-upload-collection-item
		file-name="Laptop.jpg"
		upload-state="Uploading"
		progress="37"
	>
		<img src="../../../assets/images/HT-1000.jpg"slot="thumbnail">
		uploadState="Uploading"
	</ui5-upload-collection-item>
	<ui5-upload-collection-item
		file-name="latest.reports.pdf"
		upload-state="Error"
		progress="59"
	>
		<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
		uploadState="Error"
	</ui5-upload-collection-item>
	<ui5-upload-collection-item
		file-name="Notes.txt"
	>
		<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
		uploadState="Ready" (default)
	</ui5-upload-collection-item>
</ui5-upload-collection>

<script>
	uploadCollectionStates.addEventListener("ui5-retry", event => {
		alert("Retry uploading: " + event.target.fileName);
	});

	uploadCollectionStates.addEventListener("ui5-terminate", event => {
		alert("Terminate uploading of: " + event.target.fileName);
	});
</script>
	

UploadCollection With Drag and Drop and No Initial Data

Attachments
<ui5-upload-collection id="uploadCollectionDnD" style="height: 30rem;">
	<div class="header" slot="header">
		<ui5-title>Attachments</ui5-title>
	</div>
</ui5-upload-collection>

<script>
	uploadCollectionDnD.addEventListener("drop", event => {
		event.preventDefault();

		const files = event.dataTransfer.files;

		// Take the files from the drop event and create <ui5-upload-collection-item> from them
		for (let i = 0; i < files.length; i++) {
			uci = createUCI(files[i]);
			uploadCollectionDnD.appendChild(uci)
		}
	});
</script>
	

Overview

This component allows you to represent files before uploading them to a server, with the help of ui5-upload-collection-item. It also allows you to show already uploaded files.

ES6 Module Import

import @ui5/webcomponents-fiori/dist/UploadCollection.js";
import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"; (for ui5-upload-collection-item)

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
mode
ListMode
"None"
Defines the mode of the ui5-upload-collection.

Note: Available options are None, SingleSelect, MultiSelect, and Delete.
noDataDescription
no-data-description
string
""
Allows you to set your own text for the 'No data' description.
noDataText
no-data-text
string
""
Allows you to set your own text for the 'No data' text.
noDnd
no-dnd
boolean
false
By default there will be drag and drop overlay shown over the ui5-upload-collection when files are dragged. If you don't intend to use drag and drop, set this property to true

Note: It is up to the application developer to add handler for drop event and handle it. ui5-upload-collection only shows an overlay.

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]
Defines the items of the ui5-upload-collection.
Note: Use ui5-upload-collection-item for the intended design.
header
HTMLElement [0..n]
Defines the ui5-upload-collection header.

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
file-deleted
Fired when the Delete button of any item is pressed.

Note: A Delete button is displayed on each item, when the ui5-upload-collection mode property is set to Delete.
item
type: HTMLElement
description: The ui5-upload-collection-item which was renamed.
selection-change
Fired when selection is changed by user interaction in SingleSelect and MultiSelect modes.
selectedItems
type: Array
description: An array of the selected items.

UploadCollectionItem

Overview

A component to be used within the ui5-upload-collection.

ES6 Module Import

import @ui5/webcomponents-fiori/dist/UploadCollectionItem.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
file
File
null
Holds File, associated with this item.
fileName
file-name
string
""
The name of the file.
fileNameClickable
file-name-clickable
boolean
false
If set to true the file name will be clickable and it will fire file-name-click event upon click.
noDelete
no-delete
boolean
false
Removes delete option from ui5-upload-collection with mode Delete for this item.
noRetry
no-retry
boolean
false
Hides the retry button when uploadState property is Error.
noTerminate
no-terminate
boolean
false
Hides the terminate button when uploadState property is Uploading.
progress
Integer
0
The upload progress in percentage.

Note: Expected values are in the interval [0, 100].
uploadState
upload-state
UploadState
"Ready"
If set to Uploading or Error, a progress indicator showing the progress is displayed. Also if set to Error, a refresh button is shown. When this icon is pressed retry event is fired. If set to Uploading, a terminate button is shown. When this icon is pressed terminate event is fired.

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
Node [0..n]
Hold the description of the ui5-upload-collection-item. Will be shown below the file name.
thumbnail
HTMLElement
A thumbnail, which will be shown in the beginning of the ui5-upload-collection-item.

Note: Use ui5-icon or img for the intended design.

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
file-name-click
Fired when the file name is clicked.

Note: This event is only available when fileNameClickable property is true.
rename
Fired when the fileName property gets changed.

Note: An edit button is displayed on each item, when the ui5-upload-collection-item type property is set to Detail.
retry
Fired when the retry button is pressed.

Note: Retry button is displayed when uploadState property is set to Error.
terminate
Fired when the terminate button is pressed.

Note: Terminate button is displayed when uploadState property is set to Uploading.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel