Upload

Styling API reference for the Upload component.

CSS Selectors

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]

Documentation