How to add confirm dialog before clicking the upload button and upload complete message or 100% complete in kendo upload

[Silver Lightning]

HI Sir,

Good day.

Just would like to ask on how and where event to add confirm dialog before clicking the upload button  and how to add upload complete message or 100% complete once the upload is completed in kendo upload.

Here's my code below:


$(document).ready(function () {

        var lookup = $("#ComboLookupTable").data("kendoComboBox");
        $("#files").kendoUpload({
            async: {
                saveUrl: "Lookup/UploadFile",
                autoUpload: false,
                value: 'Import'
            },
            localization: {
                select: "Select a file",
                uploadSelectedFiles: "Import",
                headerStatusUploaded: "File validation",
                headerStatusUploading: "File uploading...",
                statusFailed: "Uploading file failed",
                statusUploaded: "File validating...",
                statusUploading: "Uploading..."
            },
            multiple: false,
            select: function (e) {
                confirmUpload();
               
            },
            upload: function (e) {
                lookup.enable(false);
                this.element.prop("disabled", true);
                this.element.closest(".k-button").addClass("k-state-disabled");
                 e.data = { selectedTable: $("#ComboLookupTable").val() };
            },
            success: function (e) {
                //debugger;
                resetUpload();
                if (e.XMLHttpRequest.responseText != '' && e.response != 'gridESREF' && e.response != 'gridFuelEfficiency' && e.response != 'gridConversionFactor' &&
                    e.response != 'gridGlobalEmissionFactor' && e.response != 'gridElectricalRegionalEmissionnFactor' && e.response != 'gridGWP') {
                    showErrorMsgsJson(e.XMLHttpRequest.responseText, 'windowDialog');
                    e.preventDefault();
                    dialog.close();
                }
                else {
                    var delay = 1500;
                    setTimeout(function () {
                        //grid names;
                        //gridRefresh(e.response);
                        dialog.close();
                    }, delay);
                }
            },
            complete: function (e) {
                resetUpload();
                this.element.prop("disabled", false);
                this.element.closest(".k-button").removeClass("k-state-disabled");
                lookup.enable(true);
            },
            error: function (e) {
                resetUpload();
                if (e.XMLHttpRequest.responseText != '') {
                    showErrorMsgsJson(e.XMLHttpRequest.responseText, 'windowDialog');
                    e.preventDefault();
                    dialog.close();
                }
            }

        });
    });

    function ConfirmCancel() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Upload",
            height: 130,
            width: 280,
            resizable: false,
            modal: true,
            animation: {
                open: {
                    effects: "fade:in",
                    duration: 500
                },
                close: {
                    effects: "slide:right fadeOut",
                    duration: 500
                }
            },
            visible: false
        });

        kendoWindow.data("kendoWindow")
            .content($("#cancel-upload").html())
            .center().open();

        kendoWindow
            .find(".delete-confirm,.delete-cancel")
                .click(function () {
                    if ($(this).hasClass("delete-cancel")) {
                        //If no
                        kendoWindow.data("kendoWindow").close();
                    }
                    else {
                        //If yes
                        resetUpload();
                        kendoWindow.data("kendoWindow").close();
                        dialog.close();
                    }
                })
    }

On my work, the confirm dialog is attached to Select event which is not a proper way.
Thank you in advance.

[T. Tsonev]

Hi,

I'm posting the reply to your support ticket here for reference:

Your current approach doesn't work, as it doesn't stop the Upload from handling the .k-upload-selected button click.

The first task is to stop the event propagation so it doesn't reach the upload:
$(".k-upload-selected").click(function (e) {
  e.stopPropagation();
  ...
}

The Cancel action is pretty straight-forward. We only need to close the dialog.

The OK action is a bit more convoluted. We need to trigger click on the button so the upload can proceed.
But this will also trigger our confirmation dialog, therefore we need to detach its handler first.
if ($(this).hasClass("upload-confirm")) {
  uploadButton.off("click").click();
}

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik