Unplanned
Last Updated: 27 Apr 2022 19:46 by Nicholas
Dan
Created on: 09 Jun 2020 14:00
Category: Upload
Type: Feature Request
27
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.
4 comments
Nicholas
Posted on: 27 Apr 2022 19:46
If you just made it work like the angular upload component that would be ideal.
ADMIN
Dimo
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" />

<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

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.

ADMIN
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.

Regards,
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.

Tomas
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.