Upload
- Usage
- Styling
- File Handling
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
- 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]