Trigger and Upload from OnClick

17 posts, 0 answers
  1. Keith
    Keith avatar
    2 posts
    Member since:
    Feb 2012

    Posted 29 Feb 2012 Link to this post

    Hello,
    We want to give the users the ability to upload documents and then click on a button which says upload; this will call a js function that will ask them to verify or acknowledge that the documents they're about to upload are in the correct format/valid signatures etc. and then on approval of this asynchronously submit the upload. 

    Is this possible? 

    Thank you.
    Keith
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Mar 2012 Link to this post

    Hello Keith,

    You can use the following approach - in the Upload's select event, locate the generated Upload button and attach a click handler to it, which will execute your custom logic.

    $(document).ready(function() {
        $("#UploadID").kendoUpload({
            async: {
                autoUpload: false
            },
            select: attachClickHandler
        });
    });
     
    function attachClickHandler(e)
    {
        window.setTimeout(function() {
            $(".k-upload-selected").click(function(e) {
                // custom logic
                if (false) {
                    e.preventDefault();
                    return false;
                }
            });
        }, 1);
    }

    If you need to reference the input fields to get their values, use

    $("#UploadID").data("kendoUpload").wrapper.find("input[type='file']")

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alberto
    Alberto avatar
    2 posts
    Member since:
    Nov 2012

    Posted 07 Jun 2013 Link to this post

    Hi,
    I'd like to not use the built in button to tirgger the upload. I'd like to do it with another button.
    What I'm doint is to hide the built in button
    $(".k-upload-selected").hide()

    And trigger its click when clicking my button.
    $(".k-upload-selected").click()

    Is there a cleaner way?
    I didn't find any method to call or event to trigger the upload.

    Thanks and regards
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Jun 2013 Link to this post

    Hello Alberto,

    We will probably provide an API method to trigger an upload in the near future. In the meantime, you can safely use the suggested approach.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Alberto
    Alberto avatar
    2 posts
    Member since:
    Nov 2012

    Posted 11 Jun 2013 Link to this post

    Thanks Dimo
  7. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 10 Nov 2014 in reply to Dimo Link to this post

    Has this API option been added? I don't see it.
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Nov 2014 Link to this post

    Hello Kyle,

    The discussed API method is still not available, due to the relatively low demand this feature has, compared to others, which we have worked on. You can submit a feature request and vote for it at our feedback portal, in order to raise the priority of the task:

    http://kendoui-feedback.telerik.com/

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Artur
    Artur avatar
    11 posts
    Member since:
    Dec 2014

    Posted 24 Jul 2015 in reply to Dimo Link to this post

    Would the following code:

    $('#fileUpload​').getKendoUpload().trigger('upload') 

    with the "upload" event handler configured, do the trick?

    But I agree - I reckon the implementation of the Upload widget simply not finished. Wouldn't it be a matter of just wrapping a couple of code lines (that must have already been in there), into a method helper? :) Please add it without asking people for feedback ranking. Please please please.

  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Jul 2015 Link to this post

    Hi Artur,

    Triggering the Upload event manually will not start the upload process, because the logic is the other way around - the upload process triggers the event.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Artur
    Artur avatar
    11 posts
    Member since:
    Dec 2014

    Posted 24 Jul 2015 in reply to Dimo Link to this post

    Yes, correct. It only looks like working in that the event is actually triggered, but is empty (does not carry e.filescollection for example).
  12. yula
    yula avatar
    3 posts
    Member since:
    Oct 2015

    Posted 16 Nov 2015 Link to this post

    Hello,

    I have a similar issue - I would like to generate a click on the select button that will be fired on the window upload - how can that be done?

    Thank you,

                     Yulia.

  13. yula
    yula avatar
    3 posts
    Member since:
    Oct 2015

    Posted 16 Nov 2015 Link to this post

    Hi, 

    I would like to generate a click on the select button (to open a window from which the file will be selected) on document lod. What is the best way to achieve it?

    Thank you,

                        Yula.

  14. yula
    yula avatar
    3 posts
    Member since:
    Oct 2015

    Posted 16 Nov 2015 Link to this post

    Hi, 
    I would like to generate a click on the select button (to open a window from which the file will be selected) on document lod. What is the best way to achieve it?
    Thank you,
                        Yula.
  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 18 Nov 2015 Link to this post

    Hello Yula,

    This behavior is not supported due to browser security restrictions. The selection of the file has to be triggered by user interaction, not via JavaScript.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. Vladimir
    Vladimir avatar
    11 posts
    Member since:
    May 2013

    Posted 23 Mar Link to this post

    Hello Dimo,

      I see that the method has not yet been added.I'm trying to resolve following scenario:

    Imagine "windows explorer" UI, where the folders tree on left supports drag&drop of files directly on the folders. This should show upload dialog (ui-modal) where the kendo-upload control is located and start the actual upload.

    I'm at a point where I have the event object containing the uploaded files, but I don't know how to pass it onto the kendo-upload to trigger the upload process. 

    Can you please suggest solution for this?

    Thanks,

    Vladimir

  17. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 23 Mar Link to this post

    Hello Vladimir,

    Manually passing the files for uploading is not supported by the widget. The file selection should be initiated by the user in order to start the upload process.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  18. Vladimir
    Vladimir avatar
    11 posts
    Member since:
    May 2013

    Posted 27 Mar in reply to Dimiter Madjarov Link to this post

    Just in case anyone needs this, I've found a way of implementing it.

    Dojo is not working for some reason, so here is code fragment:

    <div id="mydrop">
       (drop files here)
    </div>
    <input type="file" name="files" id="upload" />

    And this is JS fragment - I'm using the "_onDrop(e)" function found within the source code of kendo upload :)

    var mydrop = $("#mydrop");
    var upload = $("#upload").data("kendoUpload");
     
    function myOnDrop(e) {
      e.stopPropagation();
      e.preventDefault();
      if (isFileDragDropEvent(e)) {
        var files = e.originalEvent.dataTransfer.files;
        mydrop.text("Droped: " + files.length + " files");
        // this is the trick
        upload._onDrop(e);
      }
    }
     
    function isFileDragDropEvent(e) {
      var dt = e.originalEvent.dataTransfer;
      return (dt.types != null && ($.inArray("Files", dt.types) !== -1 || dt.types.contains("application/x-moz-file")));
    }
     
     
    $(document).ready(function () {
                mydrop.on("drop", myOnDrop);
    });
     

     

    Thanks,

    Vlad.

Back to Top
Kendo UI is VS 2017 Ready