UploadCollection

<ui5-upload-collection> | Since 1.0.0-rc.7

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)

Basic Sample

Properties

selectionMode

Description	Defines the selection mode of the ui5-upload-collection.
Type	"None" | "Single" | "SingleStart" | "SingleEnd" | "SingleAuto" | "Multiple"
Default	"None"

noDataDescription

Description	Allows you to set your own text for the 'No data' description.
Type	string | undefined
Default	undefined

noDataText

Description	Allows you to set your own text for the 'No data' text.
Type	string | undefined
Default	undefined

hideDragOverlay

Description	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. Note: It is up to the application developer to add handler for drop event and handle it. ui5-upload-collection only displays an overlay.
Type	boolean
Default	false

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.16

Slots

default

Description	Defines the items of the ui5-upload-collection. Note: Use ui5-upload-collection-item for the intended design.
Type	Array<UploadCollectionItem>

header

Description	Defines the ui5-upload-collection header. Note: If header slot is provided, the labelling of the UploadCollection is a responsibility of the application developer. accessibleName should be used.
Type	Array<HTMLElement>

Events

item-delete

Description	Fired when an element is dropped inside the drag and drop overlay. Note: The drop event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the ui5-upload-collection.
Type	CustomEvent<UploadCollectionItemDeleteEventDetail>
Parameters	dataTransfer: DataTransfer The drop event operation data.
Bubbles	Yes
Cancelable	No

selection-change

Description	Fired when selection is changed by user interaction in Single and Multiple modes.
Type	CustomEvent<UploadCollectionSelectionChangeEventDetail>
Parameters	selectedItems: Array An array of the selected items.
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

Renaming Files

Upload States

Drag and Drop