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>