You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Customization · Vaadin
Vaadin Elements - Upload - Customization

Customization

It is possible to customize the vaadin-upload element in two ways: by changing default styles or by providing custom content.

Styling

To override default styles you should use Polymer mixins.

<style is="custom-style">
   vaadin-upload {
     --primary-color: #396;
     --vaadin-upload-file-row: {
         background-color: rgba(183, 225, 205, 0.24);
         padding: 5px;
         border-radius: 4px 4px 0px 0px;
     };
   }
 </style>
 <vaadin-upload></vaadin-upload>
vaadin upload custom content 1
Figure 1. A Custom CSS

Color properties

vaadin-upload reuses certain color properties from paper-styles:

Property name default color

--primary-color

#00B4F0

--primary-text-color

#000

--light-primary-color

#7CD8F7

--error-color

#f40303

--disabled-text-color

#b3b3b3 or gray

--divider-color

#666 or #e0e0e0

Custom CSS Properties

The following custom properties are available for styling the component.

Styles for the vaadin-upload element

Property name Description

--vaadin-upload-buttons

A mixin that is applied to the buttons container

--vaadin-upload-buttons-primary

A mixin that is applied to the primary buttons container (on the left side)

--vaadin-upload-buttons-secondary

A mixin that is applied to the secondary buttons container (on the right side)

--vaadin-upload-button-add

A mixin that is applied to the upload button

--vaadin-upload-button-add-disabled

A mixin that is applied to the upload button when maxFiles limit is reached

--vaadin-upload-file-list

A mixin that is applied to the file list

--vaadin-upload-drop-label

A mixin that is applied to the drop label

--vaadin-upload-drop-label-dragover

A mixin that is applied to the drop label when overing the component with files

--vaadin-upload-drop-label-icon

A mixin that is applied to the drop icon

--vaadin-upload-drag-ripple

A mixin that is applied to the ripple animation in the drop area

Styles for the vaadin-upload-file Element

Property name Description

--vaadin-upload-file

A mixin that is applied to the host element

--vaadin-upload-file-row

A mixin that is applied to the file row

--vaadin-upload-file-status-icon

A mixin that is applied to all file status icons. By default, file status icons are hidden until the upload process finishes.

--vaadin-upload-file-status-icon-complete

A mixin that is applied to the complete status icon when the upload process succeeds

--vaadin-upload-file-status-icon-error

A mixin that is applied to the error status icon when the upload process fails

--vaadin-upload-file-meta

A mixin that is applied to the info container

--vaadin-upload-file-meta-complete

A mixin that is applied to the info container when file upload is complete

--vaadin-upload-file-meta-error

A mixin that is applied to the info container when an error happens

--vaadin-upload-file-name

A mixin that is applied to the file name

--vaadin-upload-file-status

A mixin that is applied to the file status label

--vaadin-upload-file-error

A mixin that is applied to the file error label

--vaadin-upload-file-commands

A mixin that is applied to the buttons container

--vaadin-upload-file-progress

A mixin that is applied to the included paper-progress

--vaadin-upload-file-progress-error

A mixin that is applied to the progress bar when error is set

--vaadin-upload-file-progress-indeterminate

A mixin that is applied to the progress bar when indeterminate

--vaadin-upload-file-progress-uploading-indeterminate

A mixin that is applied to the progress bar when uploading and indeterminate

--vaadin-upload-file-progress-complete

A mixin that is applied to the progress when the file is complete

--vaadin-upload-file-canceled

A mixin that is applied to the upload cancel animation

Modifying the Content

The vaadin-upload element provides content composition through the element’s light DOM.

There are three modifiable parts: the drop label content, the file list, and the section after it. The first part must be marked with the class name drop-label, the file list with file-list, and the third one is composed of the remaining element content.

The following example shows how to modify them:

<vaadin-upload >
  <div class="drop-label">
    Drop your documents here.
  </div>
  <div class="file-list">
    <ul>
      <template is="dom-repeat" items="{{files}}" as="file">
        <li>[[file.name]]: [[file.status]]
      </template>
    </ul>
  </div>
  <div>
    Accepts up to 3 PDF files, up to 1MB each
  </div>
</vaadin-upload>
vaadin upload custom content 2
Figure 2. Custom content