New to Kendo UI for jQuery? Download free 30-day trial

Show the Confirm Dialog before Uploading Files

Environment

Product Progress® Kendo UI® Upload for jQuery

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

In this article