Skip to main content

UploadCollection

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​

mode​

DescriptionDefines the mode of the ui5-upload-collection.
Note: Mode "Delete" has no effect. The delete button is controlled by the hideDeleteButton property of UploadCollectionItem
Type"None" | "SingleSelect" | "SingleSelectBegin" | "SingleSelectEnd" | "SingleSelectAuto" | "MultiSelect" | "Delete"
Default"None"

noDataDescription​

DescriptionAllows you to set your own text for the 'No data' description.
Typestring
Default""

noDataText​

DescriptionAllows you to set your own text for the 'No data' text.
Typestring
Default""

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
Default""
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<IUploadCollectionItem>
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

item-delete​

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

selection-change​

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

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​