Last Updated: 28 Feb 2023 11:57 by ADMIN
Release 4.1.0 (15/03/2023)
Created on: 09 Jun 2020 14:00
Category: Upload
Type: Feature Request
Custom DropTarget for TelerikUpload
I would like to use a custom zone on my page where people can drop files. At the moment, the upload requires a click on the "upload" button.
Posted on: 13 Feb 2023 08:37

Hi Joe, Nicholas,

The Upload and FileSelect will get a button template in 4.1.

DropZone highlight on hover and GMail-like DropZone user experience will be possible to achieve as well.

Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Posted on: 06 Feb 2023 16:49
Just chiming in with some suggestions based on this thread:

I agree with Nick regarding needing the ability to customize each of the pieces of text. The use case won't always make sense for the default text that you have or you may want to cater the text to the particular process that the component is supporting. 

I do like Gmail's interface and experience better once you are at the point of hovering over the email to drop your files. That is definitely better than highlighting the control (like in the Telerik Angular version) and seeing the word "Copy". I don't think "Copy" makes sense in this context, but if that can text can be customized, then that would be fine. Where Telerik is better is that I think having text to indicate that there is a dropzone is better. In Gmail, there is nothing and it's only obvious because people are very familiar with email. In the use case of using this component it may not otherwise be obvious that you can drag/drop files. I wouldn't want a giant drag/drop zone personally, as it takes up too much real estate, but if that can be customized that'd be fine. 

I am mostly good with your approach in Angular, only it needs to allow changing the text and tooltip (required) and it would be nice if there was some kind of overlay (like Gmail's) upon dragging in (being a nice to have).

Posted on: 06 Feb 2023 14:46

Can you please make sure to allow us to easily change the text of "Select Files", "Drop Files hear to upload" and / or give us a template  so we can make it look however we want. ( I understand the external drop zone we will be able to make look however we would like)


In addition if you had an option to make it work like dragging an attachment into a gmail email message that would be very helpful. To explain when you drag the file over over any where in the view port, the drop zone is then highlighted / text changes where the user should drag the file.  The gmail UI provides a more obvious visual queue and experience to what you have in the Angular version.  With the gmail UI also, the equivalent to "select files" is just an icon and the list of uploaded files is shown in a different location then the "select files".

The "gmail" process is usually the more desired result when dealing with UIs that need to upload. (Not always the case though)

Posted on: 06 Feb 2023 13:00

Hello all,

Just wanted to give you an update on this:

We have changed the status of this item to Planned, and have included it in our backlog for our next release, scheduled for March.

As some of the requests here while similar, are ultimately different, I wanted to clarify what its implementation would entail.

We will ship a standalone component which will serve as an external/custom drop zone for our already-existing FileSelect and Upload components. You can have a look at the one we have in our Angular suite for reference:

We will also provide drop functionality for both the FileSelect and Upload components. Note this will support drop over the component's "Select files..." button, as well as its surrounding wrapper. Again, this could be used as reference:

If the above will facilitate your requirements - then great! If not, feedback and/or suggestions are more than welcome. Thanks!

Regards, Radko Stanev Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Posted on: 27 Apr 2022 19:46
If you just made it work like the angular upload component that would be ideal.
Posted on: 13 Apr 2022 06:27

Hi all,

Here is a CSS workaround that makes the Upload button a lot larger and mimics a drop zone. Use it until we implement the built-in feature.

<TelerikUpload Class="large-upload" />

    /* status message positioning */
    .large-upload .k-dropzone,
    .large-upload .k-dropzone .k-upload-status {
        display: block;

    /* status message spacing */
    .large-upload .k-dropzone .k-upload-status {
        padding: .4em .4em .2em;

    /* drop zone size and background */
    .large-upload .k-dropzone .k-button {
        display: block;
        width: 100%;
        height: 200px;
        position: relative;
        background-image: none;

    /* drop zone hover background - optional */
    .large-upload .k-dropzone .k-button:hover {
        /* background-color: #fff; */

    /* drop zone label - optional */
    .large-upload .k-dropzone .k-button::before {
        content: "Drop files here ...";
        display: block;
        font-size: 16px;
        position: absolute;
        top: 1em;
        left: 1em;
        bottom: auto;
        right: auto;
        opacity: 1;
        background: transparent;

    /* "Select files" label position and button styling */
    .large-upload .k-dropzone .k-button span {
        position: absolute;
        top: 50%;
        margin-top: -1em;
        border: 1px solid rgba(0, 0, 0, 0.08);
        padding: 4px 8px;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
        background-color: #f5f5f5;
        color: #424242;

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Marin Bratanov
Posted on: 12 Jun 2021 14:44

Hi Tomas,

Dragging onto the button effectively drags the file on the <input> element, which lets the browser capture the files immediately, without any additional application code (effectively, it acts the same way as using the OS selection window) and so the current code and functionality "just works™".

To extend this to other areas of the page, we need to write additional code to handle JS events there, and pass data along to the C# (Blazor) portion of the app. Thus, this feature needs to be implemented in the component and I am sorry to say that a workaround is not possible.

Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Posted on: 01 Jun 2021 06:48

Hi, is there any workaround how to drop files into Blazor TelerikUpload? It works when I drop the file on the "Select files..." button. Could this behavior be extended somehow to a bigger area (dropzone)?


Thank yoo Tomas.