Skip to main content

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​

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

noDataDescription​

DescriptionAllows you to set your own text for the 'No data' description.
Typestring | undefined
Defaultundefined

noDataText​

DescriptionAllows you to set your own text for the 'No data' text.
Typestring | undefined
Defaultundefined

hideDragOverlay​

DescriptionBy 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.
Typeboolean
Defaultfalse

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.16

Slots​

default​

DescriptionDefines the items of the ui5-upload-collection.
Note: Use ui5-upload-collection-item for the intended design.
TypeArray<UploadCollectionItem>
DescriptionDefines 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.
TypeArray<HTMLElement>

Events​

drop​

DescriptionFired 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.
TypeEvent
BubblesYes
CancelableNo

item-delete​

DescriptionFired when the delete button of any item is pressed.
TypeCustomEvent<UploadCollectionItemDeleteEventDetail>
Parametersitem: HTMLElement
The ui5-upload-collection-item which was deleted.
BubblesYes
CancelableNo

selection-change​

DescriptionFired when selection is changed by user interaction in Single and Multiple modes.
TypeCustomEvent<UploadCollectionSelectionChangeEventDetail>
ParametersselectedItems: Array
An array of the selected items.
BubblesYes
CancelableNo

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​