New to KendoReact? Start a free 30-day trial
Position Drop Zone Hint Next to Select Files Button in Upload
Updated on Feb 27, 2026
Environment
| Product Version | 14.2.0 |
| Product | Progress® KendoReact Upload |
Description
By default, the Upload component displays the "Drop files here to upload" hint text centered below the Select Files button. I want to position this text next to the button on the same line for a more compact layout.
This KB article also answers the following questions:
- How do I customize the Upload drop zone layout?
- Can I move the drop zone hint text horizontally?
- How to align the Upload hint text with the select button?
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.
Add the following CSS to your application:
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 ...