KendoUpload directoryDrop both folders and files

14 posts, 0 answers
  1. James
    James avatar
    2 posts
    Member since:
    Dec 2015

    Posted 08 Jun 2017 Link to this post

    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;
                    });

     

  2. Plamen
    Admin
    Plamen avatar
    3049 posts

    Posted 12 Jun 2017 Link to this post

    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.
  3. James
    James avatar
    2 posts
    Member since:
    Dec 2015

    Posted 12 Jun 2017 in reply to Plamen Link to this post

    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.

     

  4. Plamen
    Admin
    Plamen avatar
    3049 posts

    Posted 13 Jun 2017 Link to this post

    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.
  5. xovo
    xovo avatar
    2 posts
    Member since:
    Jun 2019

    Posted 05 Jun 2019 Link to this post

    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!

  6. Plamen
    Admin
    Plamen avatar
    3049 posts

    Posted 07 Jun 2019 Link to this post

    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.
  7. xovo
    xovo avatar
    2 posts
    Member since:
    Jun 2019

    Posted 10 Jun 2019 Link to this post

    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,

     

     

  8. Plamen
    Admin
    Plamen avatar
    3049 posts

    Posted 12 Jun 2019 Link to this post

    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.
  9. Alison Carden
    Alison Carden avatar
    2 posts
    Member since:
    Jun 2019

    Posted 27 Jun 2019 in reply to Plamen Link to this post

    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!

  10. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 01 Jul 2019 Link to this post

    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.
  11. Alison Carden
    Alison Carden avatar
    2 posts
    Member since:
    Jun 2019

    Posted 01 Jul 2019 in reply to Dimitar Link to this post

    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!

  12. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 03 Jul 2019 Link to this post

    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.
  13. Greg
    Greg avatar
    3 posts
    Member since:
    May 2018

    Posted 04 Nov 2019 Link to this post

    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);
                                                }
                                            };

  14. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 05 Nov 2019 Link to this post

    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.
Back to Top