This is a migrated thread and some comments may be shown as answers.

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

1 Answer 235 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Silver Lightning
Top achievements
Rank 1
Silver Lightning asked on 19 Jun 2014, 11:01 AM
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.

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 20 Jun 2014, 01:02 PM
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!
 
Tags
Upload
Asked by
Silver Lightning
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or