Wait for Sweetalert2 async confirm before continuing filepredelete event in bootstrap-fileinput

Question

Having some issues with the plugin Bootstrap File Input and SweetAlert2

This is for showing a dialog box to confirm if the user really wants to proceed with deleting the file.

I need to return a boolean for filepredelete event if I'm going to abort the deletion of the file. The function is synchronous but I'm using an asynchronous plugin SweetAlert2 with promises.

Here's my code:

$("#gallery-images").fileinput({
           ...

}).on("filepredelete", function(event, key, jqXHR, data) {

    swal({
        title: 'Are you sure you want to delete this image?',
        showCancelButton: true,
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning',
    }).then((result) => {
        if(result.value){
            return false;
        }
        return true;
    });

});

I can't find a way to wait for the confirmation. I'm thinking of just always abort the deletion and just manually delete the file when the user confirmed. I need to refactor my code.

Answer 1

Try the promises, I've been struggling the same problem for 3 days and figured out, hope this help for some one.

$("#gallery-images").fileinput({
       ...

    }).on("filepredelete", function(event, key, jqXHR, data) {

    return new Promise(function(resolve, reject) {
            swal.fire({
                title: 'Are you sure?',
                text: 'You will not be able to recover this file!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, keep it'
            }).then((result) => {
                if (result.value) {
                    resolve();
                }
            });
        });

    });

Enjoy!