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

[AppsWiz]

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.

 HTML:

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

 

            <script>

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

                    .......

            </script>

 CSS:

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

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

 

 

    

[Dimiter Madjarov]

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.

Regards,
Dimiter Madjarov
Telerik