Show Confirm Dialog before Uploading Files

Environment

Product	Telerik UI for ASP.NET MVC Upload
Operating System	All
Browser	All
Browser Version	All

Description

How 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 Mode with AutoUpload turned off.

This is a customized solution that does not support other modes. Such as Chunk Upload or Synchronous Mode of operation.

To achieve the desired outcome:

1. Subscribe to the Select event handler of the Upload.
2. Within the handler, remove the default click handler from the upload button programmatically by using the off jQuery method.
3. Prevent the default upload workflow.
4. Depending on the user's response from the dialog, either call the upload method if confirmed or the removeAllFiles method if cancelled.

The following example demonstrates how to implement these steps:

Razor

   @(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a   
        .Save("OnPostUpload", "Home")   
        .Remove("OnPostRemove", "Home") 
        .AutoUpload(false)
    )
    .Events(ev => ev.Select("onSelect"))
)

Script.js

<script>
    function onUpload(e){
        let upload = $("#files").getKendoUpload();

        kendo.confirm("Confirm Uploading")
            .done(function () {
                /* The result can be observed in the DevTools(F12) console of the browser. */
                console.log("User accepted");
                upload.upload();
            })
            .fail(function() {
                /* The result can be observed in the DevTools(F12) console of the browser. */
                console.log("User rejected");
                upload.removeAllFiles();                
            });
    }
    function onSelect(e) {
        setTimeout(function () {
            var uploadBtn = e.sender.wrapper.find(".k-upload-selected");
            $(e.sender.wrapper).off("click",".k-upload-selected");
            $(uploadBtn).bind("click", onUpload);
        }, 200)
    }
</script>

For a runnable example based on the code above, refer to the REPL example on Confirmation Before Uploading Files.

More ASP.NET MVC Upload Resources

• ASP.NET MVC Upload Documentation

• ASP.NET MVC Upload Demos

• ASP.NET MVC Upload Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Upload for ASP.NET MVC

• Server-Side API Reference of the Upload for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base