Edit this page

Show the Confirm Dialog before Uploading Files

Environment

Product Progress Kendo UI Upload

Description

Can I implement a Confirm dialog before the user uploads a file when the Upload is in asynchronous mode.

Solution

Use the Kendo UI Confirm Dialog and an asynchronous Upload with AutoUpload turned off.

The following example demonstrates how to open the Confirm Dialog within the select event handler and display the name of the file.

  <input name="files" id="files" type="file" />
  <script>
    $(document).ready(function() {
      $("#files").kendoUpload({
        multiple: false,
        async: {
          // Disable AutoUpload of files
          autoUpload: false,
          saveUrl: "https://demos.telerik.com/kendo-ui/upload/async/save",
          removeUrl: "https://demos.telerik.com/kendo-ui/upload/async/remove",
          withCredentials: false
        },
        select: function(e) {
          var file = e.files[0];
          // Get reference to the Upload widget
          var upload = e.sender;
          // Initialize a Confirm Dialog
          kendo.confirm("File name:" +
                        "<br/>" +
                        file.name +
                        "<br/>" +
                        "Are you sure that you want to upload this file?")
            .then(function () {
              // Upload the file if confirmed
              upload.upload();
            }, function () {
              // Clear the file from the Upload if denied
              upload.clearAllFiles();
            });
        }
      });
    });
  </script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy