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:
- Subscribe to the Select event handler of the Upload.
- Within the handler, remove the default click handler from the upload button programmatically by using the off jQuery method.
- Prevent the default upload workflow.
- 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:
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("OnPostUpload", "Home")
.Remove("OnPostRemove", "Home")
.AutoUpload(false)
)
.Events(ev => ev.Select("onSelect"))
)
<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.