Drag & Drop File Upload

5 posts, 0 answers
  1. Colin
    Colin avatar
    4 posts
    Member since:
    Jun 2012

    Posted 14 Jun 2012 Link to this post


    I have been unable to initialize the drag and drop feature for file upload on any of my browsers.  I am currently testing on Chrome 19.0.1084.56 m.  Is there an undocumented configuration parameter I am missing which will initialize this feature?  

    Here is my code, please let me know if you see anything I have configured improperly.

    HTML:

    <div class="fileUploadContentArea">
    <input name="file" id="kendoFileUpload" type="file" />
    </div>

    JS:

     $("#kendoFileUpload").kendoUpload({
      multiple: true,
            select: context.onFileSelected,
    async: {
    saveUrl: THX.WS.config.baseUrl + THX.WS.config.wsId + '/files',                        
    autoUpload: true
    },
    upload: context.kendoFileUploaderDrop,
    success: context.kendoFileUploaderDone,
    error: context.kendoFileUploaderError,
    showFileList : false,
    localization : {
    select : libraryAssetsLocalizedStrings.mainUploadSelectLabel,
    dropFilesHere : libraryAssetsLocalizedStrings.mainUploadDragDropLabel
    }
    });
  2. Colin
    Colin avatar
    4 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    At the very least has anyone got the drag and drop feature of file upload to work on their system?
  3. Mark Dawson
    Mark Dawson avatar
    19 posts
    Member since:
    Aug 2012

    Posted 20 Jun 2012 Link to this post

    Hi Colin,

    I have gotten this to work but it required editing the kendo files.

    There is a part of the upload component that relies on browser (userAgent) detection and modifies it's behaviour accordingly. One of the things modified is the drag and drop capabilities.

    In kendo.web.js and kendo.upload.js (if you have source files available), you'll find the following:
    _supportsFormData: function() {
        if ($.browser.safari) {
            return false;
        }
     
        return typeof(FormData) != "undefined";
    },

    Removing the first three lines has so far worked fine for me but I've not tested it to any level. There may be unwanted side effects that I've not yet seen - it's working in Chrome but I've not fired up Safari. As feature detection is still present and the drag/drop part does further browser checks, I'm reasonably confident those lines are not needed.

    $.browser.safari will return true on any webkit based browser and $.browser is deprecated.

    Regards,
    Mark.
  4. Colin
    Colin avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    Mark,

     Prefect, that did the trick! Drag and drop is now working like a charm.  Does the Kendo team know about this issue?  I would mark this as an answer, but since it requires changing the base code, I'll leave that alone. 

    Thanks again!
    Colin
  5. Devi
    Devi avatar
    2 posts
    Member since:
    Sep 2012

    Posted 12 Nov 2012 Link to this post

    thanks that helped
Back to Top