`<vaadin-upload>`

`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.

Category: Forms
Built with: Lit
Library: Vaadin
Author: Vaadin
Package: @vaadin/upload
Component size: 19.5 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular: 3 out of 5
Downloads: 63,857/week · jsDelivr 2,785 hits/month (whole @vaadin/upload package)
Latest stable version: 25.3.2
Last published: Oct 2, 2026
Component last changed: Sep 22, 2026 (in 25.3.0)
License: Apache-2.0

<vaadin-upload> is a Web Component for uploading multiple files with drag and drop support.

Example:

<vaadin-upload></vaadin-upload>

The following shadow DOM parts are available for styling:

Part name	Description
`primary-buttons`	Upload container
`drop-label`	Element wrapping drop label and icon

The following state attributes are available for styling:

Attribute	Description
`disabled`	Set when the element is disabled
`nodrop`	Set when drag and drop is disabled (e.g., on touch devices)
`dragover`	Set when the file is being dragged over the element
`dragover-valid`	Set when the dragged file is valid with `maxFiles` and `accept` criteria
`max-files-reached`	Set when maximum number of files that the user is allowed to add has been reached

The following custom CSS properties are available for styling:

Custom CSS property
`--vaadin-upload-background`
`--vaadin-upload-border-color`
`--vaadin-upload-border-radius`
`--vaadin-upload-border-width`
`--vaadin-upload-drop-label-color`
`--vaadin-upload-drop-label-font-size`
`--vaadin-upload-drop-label-font-weight`
`--vaadin-upload-drop-label-gap`
`--vaadin-upload-drop-label-line-height`
`--vaadin-upload-file-border-radius`
`--vaadin-upload-file-button-background`
`--vaadin-upload-file-button-border-color`
`--vaadin-upload-file-button-border-radius`
`--vaadin-upload-file-button-border-width`
`--vaadin-upload-file-button-padding`
`--vaadin-upload-file-button-text-color`
`--vaadin-upload-file-done-color`
`--vaadin-upload-file-error-color`
`--vaadin-upload-file-error-font-size`
`--vaadin-upload-file-error-font-weight`
`--vaadin-upload-file-error-line-height`
`--vaadin-upload-file-gap`
`--vaadin-upload-file-list-divider-color`
`--vaadin-upload-file-list-divider-width`
`--vaadin-upload-file-name-color`
`--vaadin-upload-file-name-font-size`
`--vaadin-upload-file-name-font-weight`
`--vaadin-upload-file-name-line-height`
`--vaadin-upload-file-padding`
`--vaadin-upload-file-status-color`
`--vaadin-upload-file-status-font-size`
`--vaadin-upload-file-status-font-weight`
`--vaadin-upload-file-status-line-height`
`--vaadin-upload-file-warning-color`
`--vaadin-upload-gap`
`--vaadin-upload-icon-color`
`--vaadin-upload-padding`

See Styling Components documentation.

Attributes