Upload
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
- 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
- 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]