How to Increase dropzone for kenoui upload widget - kendo-ui

Question

The only type of documentation I can find referencing to "drop zone" is
localization.dropFilesHere String(default: "drop files here to upload")
Sets the drop zone hint.
Now how can I set the dropzone to the whole page like Blueimp?

Answer 1

Why not just override the default dropzone size? You can increase the size using basic css.
var $dropzone = $("div.k-dropzone");
$dropzone.css("height", "mycustomHeight");
$dropzone.css("width", "mycustomWidth");
Good luck.

Answer 2

This should delegate the drop event from "largedroparea" to kendo upload
<div id="largedroparea"></div>
<input type="file" name="files" id="photos" />
<script>
$("#photos").kendoUpload({
async: {
saveUrl: "save",
removeUrl: "remove"
}
});
// Setup the dnd
$('#largedroparea').on('dragenter', handleDragEnter);
$('#largedroparea').on('dragover', handleDragOver);
$('#largedroparea').on('dragleave', handleDragLeave);
$('#largedroparea').on('drop', handleDrop);
function handleDragEnter(e) {
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
// Explicitly show this is a copy.
e.originalEvent.dataTransfer.dropEffect = 'copy';
}
function handleDragLeave(e) {
}
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var event = jQuery.Event("drop");
event.originalEvent = e.originalEvent;
$('#photos em').trigger(event);
}
</script>

Answer 3

With the current version of Kendo UI Uploader it's not possible to increase the dropzone size.
Possible alternatives :
Create a div surrounding your page , whenever the files are dropped in this div create a List like filesToUpload of the dropped files and then assign this list to the files option of kendo upload.
files: filesToUpload,
Steps to grab the dropped files:
Stop the default behaviour in the drop event of your dropzone div
$("#yourDropzoneDiv").on("dragover", function (event) {
event.preventDefault();
event.stopPropagation();
});
$("#yourDropzoneDiv").on("dragleave", function (event) {
event.preventDefault();
event.stopPropagation();
});
$("#yourDropzoneDiv").on("drop", function (e) {
e.preventDefault();
e.stopPropagation();
var filesToUpload = [];
for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
var objDroppedFiles = {};
objDroppedFiles['name'] = e.originalEvent.dataTransfer.files[i].name
objDroppedFiles['size'] = e.originalEvent.dataTransfer.files[i].size
objDroppedFiles['extension'] = e.originalEvent.dataTransfer.files[i].type.split('/')[1]
filesToUpload.push(objDroppedFiles);
}
$("#droppedUploader").kendoUpload({
multiple: true,
async: {
saveUrl: "Upload.aspx",
autoUpload: true
},
files: filesToUpload,
upload: fileUploadDropped,
template: kendo.template($('#droppedFileTemplate').html())
});
}
This way you will be able to see the dropped files in your kendo uploader.

Answer 4

Have you tried using CSS to accomplish that? Simply:
div.k-dropzone {
height:150px;
}
This will make your dropzone bigger. Please do not that it pushes the file list downward.
Hope it helps.