A component to be used within the ui5-upload-collection
.
ES6 Module Import​
import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";
Properties​
Description | Holds an instance of File associated with this item. |
Type | File | null | undefined |
Default | null |
fileName​
Description | The name of the file. |
Type | string |
Default | "" |
fileNameClickable​
Description | If set to true the file name will be clickable and it will fire file-name-click event upon click. |
Type | boolean |
Default | false |
Description | Disables the delete button. |
Type | boolean |
Default | false |
Description | By 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. |
Type | boolean |
Default | false |
Description | Hides the retry button when uploadState property is Error . |
Type | boolean |
Default | false |
Description | Hides the terminate button when uploadState property is Uploading . |
Type | boolean |
Default | false |
progress​
Description | The upload progress in percentage. Note: Expected values are in the interval [0, 100]. |
Type | number |
Default | 0 |
uploadState​
Description | 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. |
Type | "Complete" | "Error" | "Ready" | "Uploading" |
Default | "Ready" |
Description | Defines 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​
Description | An 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. |
Type | AccessibilityAttributes |
Default | |
Since | 1.15.0 |
navigated​
Description | The navigated state of the list item. If set to true , a navigation indicator is displayed at the end of the list item. |
Type | boolean |
Default | false |
Since | 1.10.0 |
Description | Defines the text of the tooltip that would be displayed for the list item. |
Type | string |
Default | "" |
Since | 1.23.0 |
highlight​
Description | Defines 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" |
Since | 1.24 |
selected​
Description | Defines the selected state of the ListItem . |
Type | boolean |
Default | false |
default​
Description | Hold the description of the ui5-upload-collection-item . Will be shown below the file name. |
Type | Array<Node> |
thumbnail​
Description | 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. |
Type | Array<HTMLElement> |
Description | Defines 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. |
Type | Array<IButton> |
Since | 1.9.0 |
file-name-click​
Description | Fired when the file name is clicked. Note: This event is only available when fileNameClickable property is true . |
Type | CustomEvent |
Description | 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 . |
Type | CustomEvent |
terminate​
Description | Fired when the terminate button is pressed. Note: Terminate button is displayed when uploadState property is set to Uploading . |
Type | CustomEvent |
Description | Fired when the retry button is pressed. Note: Retry button is displayed when uploadState property is set to Error . |
Type | CustomEvent |
detail-click​
Description | Fired when the user clicks on the detail button when type is Detail . |
Type | CustomEvent |
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.