Skip to main content

FileUpload Item

shadow

The FileUploadItem element represents an individual item (file) within the FileUpload component. Displays details such as file name, size, upload progress, and provides actions such as deleting the file. This component is intended to be used in the context of the FileUpload component.

For more information on using FileUploadItem, navigate to the documentation of the FileUpload element

Basic usage

With picture

Is uploaded

The is-uploaded attribute displays the element in the uploaded file state.

Attributes and Properties

isUploaded

DescriptionIndicates whether the file was successfully uploaded.
Attributeis-uploaded
Typeboolean
Defaultfalse

size

DescriptionThe size of the uploaded file in bytes.
Attributesize
Typestring
Defaultundefined

name

DescriptionThe name of the file being uploaded.
Attributename
Typestring
Defaultundefined

uploaded by

DescriptionThe size of the already uploaded part of the file in bytes.
Attributeuploaded by
Typestring
Default0

progress

DescriptionPercentage of file upload progress (0-100).
Attributeprogress
Typestring
Default0

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
imageFile preview container or file type icon.

CSS Custom Properties

NameDescription
--wje-file-upload-item-border-widthThe margin width of the file entry.
--wje-file-upload-item-border-styleThe border style of the file entry.
--wje-file-upload-item-border-colorThe border color of the file item.
--wje-border-radius-mediumRound the edges of the file item.
--wje-border-colorThe colour of the image preview border.

Slots

NameDescription
imgSlot for icon or file preview.
actionSlot for action buttons (includes delete button as standard).