Position Drop Zone Hint Next to Select Files Button in Upload

Updated on Mar 12, 2026

Environment

Product Version	8.0.1
Product	Progress® Kendo UI for Vue Native

Description

By default, the Upload component displays the "Drop files here to upload" hint text centered below the Select Files button. How can I position this text next to the button on the same line for a more compact layout?

Solution

To position the drop zone hint next to the Select Files button, use CSS to change the drop zone layout from vertical to horizontal alignment. Apply flexbox styling to the drop zone container and adjust the hint positioning to display inline with the button.

css

.k-upload .k-upload-dropzone.k-dropzone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.k-upload .k-upload-dropzone .k-dropzone-hint {
  margin-left: 12px;
  flex: 0 0 auto;
  position: static;
}

The following example demonstrates the customized Upload layout:

Change Theme

Theme

Loading ...

See Also

• Upload Overview
• Upload API