On button click call file uploader syn method

[Veet]

Hello,

I have one button for confirmation and a file uploader. When I select the Image directory at the same time all the images get stored/uploaded into a specific directory. 

But my requirement is 

1) First select the image directory from my PC.

2) Click on the Confirmation button. (OK OR CANCLE).

3) If I press OK from the dialog box then I want to perform the file uploading process. 

 <ejs-uploader id="uploadSalaryImages" selected="onSelect" asyncSettings="@asyncSettings" directoryUpload="true" success="onSuccess"></ejs-uploader>

<ejs-button id="dialogBtn" content="Upload Salary Image"></ejs-button>

function onSuccess(args) {

        args.statusText = " Salary Image is uploaded";

}

var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/UploadSalary/Save/"), RemoveUrl = @Url.Content("~/ UploadSalary /Remove") };

 document.getElementById("dialogBtn").onclick = function () {

        ej.popups.DialogUtility.confirm({

            title: ' Salary Details',

             content: "Are you sure you want to upload salary images",      

             okButton: {

                text: 'OK', click: function () {

                    okImagesSalary();

                    this.hide();

                } },

            cancelButton: { text: 'Cancel', click: cancelImageUpload },

            showCloseIcon: true,

            closeOnEscape: true,

            animationSettings: { effect: 'Zoom' }

        });

    };

function okImagesSalary () {}

[Sureshkumar P]

Hi Veet, 

 

Yes, you can show a confirmation dialog using Syncfusion utility dialog as like below documentation.   

  

https://ej2.syncfusion.com/aspnetcore/documentation/dialog/how-to/render-a-dialog-using-utility-functions/#render-a-confirmation-dialog-with-options    

  

As per Utility dialog, it will return the Boolean variable as like native Confirm dialog. So, we need to manually bind the click event for OK and Cancel button. We customized as per your requirement using Syncfusion Dialog. 

<script>   

    var dialogObj, isOkClicked, isCanceled;   

    function onSelect() {   

        isOkClicked = false;   

    }   

   

    function onFileUpload(args) {   

        if (!isOkClicked) {   

            args.cancel = true;   

            isCanceled = true;   

            dialogObj = ej.popups.DialogUtility.confirm({   

                title: ' Confirmation Dialog',   

                content: "This is a Confirmation Dialog!",   

                okButton: { text: 'OK', click: okClick },   

                cancelButton: { text: 'Cancel', click: cancelClick },   

                showCloseIcon: true,   

                closeOnEscape: true,   

                animationSettings: { effect: 'Zoom' }   

            });   

        }   

    }   

    function okClick() {   

        isOkClicked = true;   

        var uploadObj = document.getElementById('uploadFiles').ej2_instances[0];   

        uploadObj.retry();   

        dialogObj.hide();   

    }   

   

    function cancelClick() {   

        dialogObj.hide();   

    }   

  

 

 

Sample:   https://www.syncfusion.com/downloads/support/directtrac/general/ze/CoreUpload-964600378  

Regards,  

Sureshkumar P