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.

Regards,
Dimo
Progress Telerik

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: https://www.telerik.com/kendo-angular-ui/components/uploads/upload/external-dropzone/

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: https://www.telerik.com/kendo-angular-ui/components/uploads/upload/

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

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" />

<style>
    /* 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;
    }
</style>

Regards,
Dimo
Progress Telerik

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.

Regards,
Marin Bratanov
Progress Telerik