Display confirmation dialog before uploading

5 posts, 0 answers
  1. 540YMX
    540YMX avatar
    7 posts
    Member since:
    Jan 2008

    Posted 23 Jun 2012 Link to this post

    I am trying to add a confirmation dialog to an upload, can make it work using the standard confirm function but would like to use a custom dialog instead.

    Markup below correctly displays the dialog but can't work out where to place e.preventDefault() to stop the upload or how to allow upload if user clicks OK.

    $(document).ready(function () {
     
          $("#attachments").kendoUpload({
              async: {
                  saveUrl: '@Url.Action("SaveAppointments", "Upload")',
                  autoUpload: false,
              },
              upload: onUpload,
              select: onSelect,
              success: onSuccess
          });
      });
     
      function onUpload(e) {
                //Standard confirm works fine but would like to use a dialog
                  //so style can be applied etc
                   
          //if (!confirm("Is this upload for the correct candidate?")) {
          //    e.preventDefault();
          //    return;
          //}
     
           
          //Dialog shows correctly but how do I stop
          //the upload if the user clicks no
          var kendoWindow = $("<div />").kendoWindow({
              title: "Confirm",
              resizable: false,
              modal: true
          });
     
          kendoWindow.data("kendoWindow")
          .content($("#upload-confirmation").html())
          .center().open();
     
          kendoWindow
          .find(".upload-confirm,.upload-cancel")
              .click(function () {
                  if ($(this).hasClass("upload-confirm")) {
                      alert("Upload file...");
                  }
                  
                  kendoWindow.data("kendoWindow").close();
              })
              .end()
     
     
          var files = e.files;
          $.each(files, function () {
              var ext = ".bmp .doc .docx .xls .xlsx .pdf .txt .jpg .jpeg .gif .zip .mp3 .wav .wmv .png .zipx .rar";
              if (ext.indexOf(this.extension) < 0) {
                  alert("Incorrect file type, accepted file types are: .bmp, .doc, .docx, .xls, .xlsx, .pdf, .txt, .jpg, .jpeg, .gif, .zip, .zipx, .rar, .mp3, .wav, .wmv and .png")
                  e.preventDefault();
              };
     
              if (this.size > 10485760) {
                  alert("File too large, maximun upload size is 10mb")
                  e.preventDefault();
              };
     
              if ($("#fileDescription").val() + '' == 'undefined') {
                  alert("A file description is required.")
                  e.preventDefault();
              };
     
              e.data = { fileDescription: $("#fileDescription").val(), appointmentid: $("#appointmentid").val() };
          });
     
           
      }

  2. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 01 Jun 2014 in reply to 540YMX Link to this post

    no answer on this??
  3. Kendo UI is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 02 Jun 2014 Link to this post

    Hi Jesureno,


    I answered this question in the other thread on the same topic.

    I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 19 Jun 2014 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    Can you give me the link on this thread? Thank you.
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 20 Jun 2014 Link to this post

    Hi,

    I'm posting the reply to your support ticket here for reference:

    Your current approach doesn't work, as it doesn't stop the Upload from handling the .k-upload-selected button click.

    The first task is to stop the event propagation so it doesn't reach the upload:
    $(".k-upload-selected").click(function (e) {
      e.stopPropagation();
      ...
    }


    The Cancel action is pretty straight-forward. We only need to close the dialog.

    The OK action is a bit more convoluted. We need to trigger click on the button so the upload can proceed.
    But this will also trigger our confirmation dialog, therefore we need to detach its handler first.
    if ($(this).hasClass("upload-confirm")) {
      uploadButton.off("click").click();
    }


    -- Live demo --

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready