3

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?

Ageonix
  • 1,748
  • 2
  • 19
  • 32
isurfbecause
  • 990
  • 4
  • 16
  • 30

4 Answers4

2

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.

kryptonkal
  • 874
  • 8
  • 23
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>
Svartis
  • 21
  • 2
  • This almost worked; the only difference is that the em element isn't contained in the input, so you need to search from an outer reference – Jonathan M Feb 18 '15 at 23:23
0

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.

Nitin Rawat
  • 209
  • 1
  • 5
  • 14
0

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.

Stargazer
  • 452
  • 10
  • 21