Drag and drop tries to copy file if file is dropped onto absolutely postioned div that overlays k-dropzone

2 posts, 0 answers
  1. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 03 Dec 2015 Link to this post

    Hi there

    I have a div with an absolute position, that contains an image element that's overlayed on top of the .k-dropzone div (by using a higher z-index). When a file is dropped onto the image in Google Chrome, the browser thinks you want to copy the file, so the upload doesn't work. How can I get the upload to trigger when the file is dropped onto the image? It works when a file is dropped onto any other part of the k-dropzone.


                <div class="logoUpload k-content">
                    <div style="float:left;">
                        <img id="logo" style="width: 80px; height: 80px; float:left;"
                             alt="loading" />
                    <input name="files" id="files" type="file" data-show-file-list="false" style="float:right; width: 50px !important;" />
                <div id="minLogoText">gif, png or jpeg - min 128px x 128px</div>



                    $(document).ready(function () {
                        $("#files").kendoUpload({  .....




     .logoUpload {
         position: relative;
         margin-top: 7px;

     #logo {
        position: absolute;
        left: 35px;
        top: 30px;
        z-index: 1;




  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2312 posts

    Posted 04 Dec 2015 Link to this post

    Hello AppsWiz,

    This is a custom modification to the widget and we cannot provide assistance regarding it. Let us know if you have other questions regarding the built in functionality of the Upload widget.

    Dimiter Madjarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top