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

KendoUpload directoryDrop both folders and files

13 Answers 154 Views
Upload
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 08 Jun 2017, 07:00 PM

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

Sort by
0
Plamen
Telerik team
answered on 12 Jun 2017, 11:11 AM
Hello,

Currently this is not supported with the default properties and methods yet you can refer to this dojo page where is shown one way to override the _Drop of the widget method and achieve similar behavior. 

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
James
Top achievements
Rank 1
answered on 12 Jun 2017, 02:46 PM

Appreciate the dojo to identify dropped items as a folder or file.

Processing both files and folders from Kendo Upload is not supported but still exploring for any workarounds.

 

0
Plamen
Telerik team
answered on 13 Jun 2017, 12:44 PM
Hi,

I have tried to upload file and folder at the same time in the dojo that I sent you in my previous reply and it worked correctly. Would you please elaborate what exactly is the scenario that you are still exploring so we could inspect it and be more helpful?

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
xovo
Top achievements
Rank 1
answered on 05 Jun 2019, 03:08 PM

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!

0
Plamen
Telerik team
answered on 07 Jun 2019, 05:46 AM
Hello,

I have tested the issue but could not observe it at my side. Would you please elaborate the issue by specifying the exact steps to achieve this behavior?

I will be looking forward for your reply.

Regards,
Plamen
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.
0
xovo
Top achievements
Rank 1
answered on 10 Jun 2019, 02:35 PM

Hi,

Just confirmed with a coworker of mine that it behaves the same way with him. What version of chrome were you using? We just tested again now with, 75.0.3770.80 (Official Build) (32-bit) and it still has the same behavior.

Thanks,

 

 

0
Plamen
Telerik team
answered on 12 Jun 2019, 01:16 PM
Hi,

I could successfully replicated the issue and here is an updated dojo that worked correctly at my side - https://dojo.telerik.com/@zdravkov/amuVOwiR.


Regards,
Plamen
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.
0
n/a
Top achievements
Rank 1
answered on 27 Jun 2019, 07:26 PM

Hi,

I am trying to implement something similar and tweaked your dojo a bit as shown here: https://dojo.telerik.com/OlomuxIT

My intent was to do drop a bunch of files and do a callback after all of the uploads were done by utilizing the 'complete' event. However, as shown in the dojo, it is making a callback after every file and not after the whole batch. Is there something in the custom code that making it fire the complete event every-time a file upload finishes instead of after it uploads all the files?

Thanks!

0
Dimitar
Telerik team
answered on 01 Jul 2019, 10:39 AM
Hi,

In general, each uploaded file is sent with a separate request. This behavior could be changed through the batch option of the Upload. However, in order for this to work correctly, and so that the complete event is triggered after all files are uploaded with the onDrop customization, the chunk option has to be removed. Here is a sample Dojo:


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.
0
n/a
Top achievements
Rank 1
answered on 01 Jul 2019, 07:07 PM

Hi,

Is there a way we can do it while keeping the chunking feature? Some of the files that we are expecting to be uploaded are around 100-200MB and we would like the UI to be still responsive in a way that it shows that the upload process is still in progress.

Thanks!

0
Dimitar
Telerik team
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.
0
Greg
Top achievements
Rank 2
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);
                                            }
                                        };

0
Dimitar
Telerik team
answered on 05 Nov 2019, 07:53 AM

Hello Greg,

Thank you for sharing the modified code snippet. I believe this will be of great help for others who struggle with the same issue.

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.
Tags
Upload
Asked by
James
Top achievements
Rank 1
Answers by
Plamen
Telerik team
James
Top achievements
Rank 1
xovo
Top achievements
Rank 1
n/a
Top achievements
Rank 1
Dimitar
Telerik team
Greg
Top achievements
Rank 2
Share this question
or