By default drag and drop files works excellent for chrome browser if the cursor is exactly over the kendo upload widget. Important - this widget is used in my application not in async mode. But when then cursor is not over kendo upload control the default action is triggered. I've blocked this by the simple code below.
$(document).on("dragover drop", function (e) {
if (e.target.type != "file") {
e.stopPropagation();
e.preventDefault();
}
});
Instead of blocking I want to change this. so when I drag file over any control in my webpage it will add a file to my kendo upload control. I've found the below solution, but this works only for one file.
$(document).on("dragover drop", function (e) {
e.stopPropagation();
e.preventDefault(); // allow dropping and don't navigate to file on drop
}).on("drop", function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
$("input[type='file']").prop("files", dataTransfer.files); // put files into element
});
Definition of this widget is simple.
<
div
class
=
"zalaczniki-files"
>
@Html.Label("Opis załączników:")
@Html.TextBox("linkDesc")
@(Html.Kendo().Upload()
.Name("files")
.Multiple(true)
.Messages(m => m.Select(linkCaption)))
</
div
>
Please - help.
Regards
Jaśkowiec Józef
Rekord