Docs

Documentation versions (currently viewingVaadin 24)

Upload

Styling API reference for the Upload component.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-upload

States

Upload with drop area disabled

vaadin-upload[nodrop]

Upload with file dragged over

vaadin-upload[dragover]

Upload with file dragged over and validated

vaadin-upload[dragover-valid]

Button and Drop Label

Button and drop label wrapper

vaadin-upload::part(primary-buttons)

Upload button

vaadin-upload > vaadin-button

Upload button text

vaadin-upload > vaadin-button::part(label)

Hovered button

vaadin-upload > vaadin-button:hover

Focused button

vaadin-upload > vaadin-button[focused]

Disabled button

vaadin-upload > vaadin-button[disabled]

Drop label

vaadin-upload::part(drop-label)

Drop label text

vaadin-upload > [slot="drop-label"]

Drop label icon wrapper

vaadin-upload > [slot="drop-label-icon"]

Drop label icon

vaadin-upload > [slot="drop-label-icon"]::before

File List

File list wrapper

vaadin-upload-file-list

File list

vaadin-upload-file-list::part(list)

File

File element

vaadin-upload-file

File content wrapper

vaadin-upload-file::part(row)

Status icons and meta info wrapper

vaadin-upload-file::part(info)

Meta information wrapper

vaadin-upload-file::part(meta)

File name

vaadin-upload-file::part(name)

Status text

vaadin-upload-file::part(status)

Error message

vaadin-upload-file::part(error)

File States

Focused file

vaadin-upload-file[focused]

Hovered file

vaadin-upload-file:hover

File uploaded successfully

vaadin-upload-file[complete]

File that failed with an error

vaadin-upload-file[error]

File with upload in progress

vaadin-upload-file[uploading]

File with unknown remaining time estimate

vaadin-upload-file[indeterminate]

Icon: upload completed

vaadin-upload-file::part(done-icon)

Icon: upload failed

vaadin-upload-file::part(warning-icon)

File Actions

Actions wrapper

vaadin-upload-file::part(commands)

Start upload button

vaadin-upload-file::part(start-button)

Retry button

vaadin-upload-file::part(retry-button)

Remove button

vaadin-upload-file::part(remove-button)

Progress Bar

Progress bar element

vaadin-upload-file > vaadin-progress-bar

Progress bar track

vaadin-upload-file > vaadin-progress-bar::part(bar)

Progress bar indicator

vaadin-upload-file > vaadin-progress-bar::part(value)

Indeterminate progress bar (unknown estimate)

vaadin-upload-file > vaadin-progress-bar[indeterminate]