This is a migrated thread and some comments may be shown as answers.

Display confirmation dialog before uploading

4 Answers 360 Views
Upload
This is a migrated thread and some comments may be shown as answers.
540YMX
Top achievements
Rank 1
540YMX asked on 23 Jun 2012, 12:27 PM
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() };
      });
 
       
  }

4 Answers, 1 is accepted

Sort by
0
Silver Lightning
Top achievements
Rank 1
answered on 02 Jun 2014, 02:52 AM
no answer on this??
0
Dimiter Madjarov
Telerik team
answered on 02 Jun 2014, 10:15 AM
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!
 
0
Silver Lightning
Top achievements
Rank 1
answered on 20 Jun 2014, 12:54 AM
Hi Dimiter,

Can you give me the link on this thread? Thank you.
0
T. Tsonev
Telerik team
answered on 20 Jun 2014, 01:06 PM
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!
 
Tags
Upload
Asked by
540YMX
Top achievements
Rank 1
Answers by
Silver Lightning
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
T. Tsonev
Telerik team
Share this question
or