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

2 posts, 0 answers
  1. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 19 Jun 2014 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 20 Jun 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top