Display confirmation dialog before uploading

[540YMX]

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

      });

 

       

  }

[Silver Lightning]

no answer on this??

[Dimiter Madjarov]

Hi Jesureno,


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

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

Hi Dimiter,

Can you give me the link on this thread? Thank you.

[T. Tsonev]

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