Skip to main content

UploadCollectionItem

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

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";

Properties​

file​

DescriptionHolds an instance of File associated with this item.
TypeFile | null | undefined
Defaultnull

fileName​

DescriptionThe name of the file.
Typestring
Default""

fileNameClickable​

DescriptionIf set to true the file name will be clickable and it will fire file-name-click event upon click.
Typeboolean
Defaultfalse

disableDeleteButton​

DescriptionDisables the delete button.
Typeboolean
Defaultfalse

hideDeleteButton​

DescriptionBy default, the delete button will always be shown, regardless of the ui5-upload-collection's property mode. Setting this property to true will hide the delete button.
Typeboolean
Defaultfalse

hideRetryButton​

DescriptionHides the retry button when uploadState property is Error.
Typeboolean
Defaultfalse

hideTerminateButton​

DescriptionHides the terminate button when uploadState property is Uploading.
Typeboolean
Defaultfalse

progress​

DescriptionThe upload progress in percentage.
Note: Expected values are in the interval [0, 100].
Typenumber
Default0

uploadState​

DescriptionIf 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.
Type"Complete" | "Error" | "Ready" | "Uploading"
Default"Ready"

type​

DescriptionDefines the visual indication and behavior of the list items. Available options are Active (by default), Inactive, Detail and Navigation.
Note: When set to Active or Navigation, the item will provide visual response upon press and hover, while with type Inactive and Detail - will not.
Type"Inactive" | "Active" | "Detail" | "Navigation"
Default"Active"

accessibilityAttributes​

DescriptionAn object of strings that defines several additional accessibility attribute values for customization depending on the use case.
It supports the following fields:
- ariaSetsize: Defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM. The value of each aria-setsize is an integer reflecting number of items in the complete set.
Note: If the size of the entire set is unknown, set aria-setsize="-1".
- ariaPosinset: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM. The value of each aria-posinset is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.
TypeAccessibilityAttributes
Default
Since1.15.0
DescriptionThe navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item.
Typeboolean
Defaultfalse
Since1.10.0

tooltip​

DescriptionDefines the text of the tooltip that would be displayed for the list item.
Typestring
Default""
Since1.23.0

highlight​

DescriptionDefines the highlight state of the list items. Available options are: "None" (by default), "Success", "Warning", "Information" and "Error".
Type"None" | "Success" | "Warning" | "Error" | "Information"
Default"None"
Since1.24

selected​

DescriptionDefines the selected state of the ListItem.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionHold the description of the ui5-upload-collection-item. Will be shown below the file name.
TypeArray<Node>

thumbnail​

DescriptionA thumbnail, which will be shown in the beginning of the ui5-upload-collection-item.
Note: Use ui5-icon or img for the intended design.
TypeArray<HTMLElement>

deleteButton​

DescriptionDefines the delete button, displayed in "Delete" mode. Note: While the slot allows custom buttons, to match design guidelines, please use the ui5-button component. Note: When the slot is not present, a built-in delete button will be displayed.
TypeArray<IButton>
Since1.9.0

Events​

file-name-click​

DescriptionFired when the file name is clicked.
Note: This event is only available when fileNameClickable property is true.
TypeCustomEvent

rename​

DescriptionFired 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.
TypeCustomEvent

terminate​

DescriptionFired when the terminate button is pressed.
Note: Terminate button is displayed when uploadState property is set to Uploading.
TypeCustomEvent

retry​

DescriptionFired when the retry button is pressed.
Note: Retry button is displayed when uploadState property is set to Error.
TypeCustomEvent

detail-click​

DescriptionFired when the user clicks on the detail button when type is Detail.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.