This is a migrated thread and some comments may be shown as answers.

KendoUpload directoryDrop both folders and files

13 Answers 965 Views

Upload

This is a migrated thread and some comments may be shown as answers.

James asked on 08 Jun 2017, 07:00 PM

kendoupload.png

Is there a solution to that allows users to drag and drop both a file and folder at the same time?

If not, is there a workaround to drop files and folders independently into the same drop zone. Currently, have a half-backed solution that changes the options.directoryDrop on the drop event, but only works on the second drop attempt. The timing of setting the option seems to be too late.

$("#files").kendoUpload({
async: {
saveUrl: "/document/upload",
autoUpload: true
},
directoryDrop: true,
dropZone: ".dropZone"
});

$(".dropZone").on("drop", function (e) {
e.preventDefault();
e.stopPropagation();
var isFolder = false;
var files = e.originalEvent.dataTransfer.files;

// find at least one folder in dropped files

$.each(files, function (i,file) {

// folders are identified with no extension and segment size of 4096
if (!file.type && file.size % 4096 === 0) isFolder = true;
});

$("#files").data("kendoUpload").options.directoryDrop = isFolder;
});

13 Answers, 1 is accepted

answered on 05 Jun 2019, 03:08 PM

ie-vs-chrome-kendo-upload.png

Hi,

Is there an updated version of the referenced dojo? Currently, it works properly if i use IE 11. But on chrome and edge the number of files uploaded is squared(x^2). Attached some screenshots

Thanks!

answered on 03 Jul 2019, 08:59 AM

Hi,

The custom modification of the onDrop private method interferes with the chunk feature and requires further modifications to the code. Thus, these are the possible scenarios:

1) Use the chunk upload with the batch option and do not override the onDrop event.

2) Use the async upload with batch and the onDrop override.

3) Further develop the onDrop override to accommodate the desired behavior. This might require more modifications to the original codebase. Thus, in case you decide to continue pursuing this approach, you could download the source code from your Telerik Profile and examine the kendo.upload.js.

In general, such features require to carefully examine all the possible scenarios, create a specification for the behavior and implement the feature accordingly. Then, the changes have to be extensively tested before they are released. Taking this into consideration, we use the Feedback Portal for tracking the demand and prioritizing the implementation of new features and enhancements. Thus, I would suggest to log this in the Feeback Portal as a new feature request.

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 04 Nov 2019, 04:52 PM

As an addendum to this thread I will post some modified javascript that was originally from https://dojo.telerik.com/OlomuxIT/7 that will allow drag & drop from outlook as sell as allowing both directories & files :

kendo.ui.Upload.fn._onDrop= function (e) {

var dt = e.originalEvent.dataTransfer;
var that = this;
var droppedFiles = dt.files;
var length;

e.stopPropagation(); e.preventDefault();

if(dt.items){
length = dt.items.length;
that.droppedFolderCounter = 0;
that.droppedFolderFiles = [];

for (var i = 0; i < length; i++) {
if(dt.items[i].webkitGetAsEntry){
var entry = dt.items[i].webkitGetAsEntry();
if (entry) {
if(entry.isDirectory){
that._traverseFileTree(entry, true);
}
else if (entry.isFile) {
if ([droppedFiles[i]].length > 0 && [droppedFiles[i]][0]) {
that._proceedDroppedItems([droppedFiles[i]]);
}
else {
var x = e.originalEvent.dataTransfer.files;
if (x && x.length > 0 && x[0].name.indexOf('msg') != -1) {
var arr = new Array();
arr.push(x[0]);
that._proceedDroppedItems(arr); //_proceedDroppedItems wants to see the file in an array or it errors
}
}
}
}
}
else {
that._proceedDroppedItems([droppedFiles[i]]);
}
}
}
else {
that._proceedDroppedItems(droppedFiles);
}
};