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.

When to use

Use wje-file-upload-item when users need to enter values, choose options, or trigger form-related actions.

When not to use

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices

• Keep validation rules and error behavior consistent across the entire form.
• Show loading or disabled states during async operations.
• Split complex forms into smaller sections with immediate feedback.

Attributes and Properties

uploaded

Description	Indicates whether the file item is already uploaded.
Attribute	uploaded
Type	any
Default	-

isUploaded

Description	Checks if the 'is-uploaded' attribute is present on the element.
Attribute	is-uploaded
Type	boolean
Default	-

Events

Name	Description
wje-button:click	Dispatches when the delete button is clicked.
wje-file-upload-item:remove	Emitted when the wje-file-upload-item:remove event is dispatched.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
button	The delete button part.
image	The image part.
name	The name part.
size	The size part.

CSS Custom Properties

Name	Description
--primary-color	The primary color of the file upload item.

Slots

Name	Description
img	Slot for the image.
action	Slot for the action buttons.