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

Add confirm dialog before click the upload button not working properly on select event in kendo upload

1 Answer 576 Views
Upload
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Silver Lightning
Top achievements
Rank 1
Silver Lightning asked on 20 Jun 2014, 09:12 AM
Hi to all,

Great day

Can you help me on how to add properly the confirm dialog before click the upload button on select event in kendo upload.
Below is the code where the confirm dialog is appearing but still the upload is still in-progress which is not right.
It should wait for the user to confirm the upload yes or no before progress event is activated.

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(e);
                              
            },
            progress: function (e) {
                debugger;
                onProgress(e);
            },
            upload: function (e) {
               // debugger;
                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();
                }
            }

        });
    });

 
//Here's the function of my confirm dialog called by select event.


    function confirmUpload(e) {
        window.setTimeout(function () {
            $(".k-upload-selected").click(function (e) {
                // custom logic
                var kendoWindow = $("<div />").kendoWindow({
                    title: "Replace Lookup Table Data?",
                    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($("#upload-confirmation").html())
                    .center().open();

                kendoWindow
                    .find(".upload-confirm,.upload-cancel")
                        .click(function () {
                            if ($(this).hasClass("upload-cancel")) {
                                // If no
                                kendoWindow.data("kendoWindow").close();
                                e.preventDefault();
                                dialog.close();
                                return false;
                            }
                            else {
                                // If yes
                                kendoWindow.data("kendoWindow").close();
                            }
                        })
                                
            });
        }, 1);
       
    }


Thank you and God bless.

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 20 Jun 2014, 01:03 PM
Hi,

I'm closing this thread as duplicate of How to add confirm dialog before clicking the upload button.

Regards,
T. Tsonev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Upload
Asked by
Silver Lightning
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or