javascriptsweetalertdropify

How to use sweet alert to cofirm image delete for dropify.js?


I want to use sweet alert confirmation before removing image. But, it doesn't work. It works if I use javascript default confirm. I tried using async and await, but it didn't help. How can I fix/debug this?

var pathURL = "file_path/";
var dropifyElements = {};
$('.dropify').each(function() {
    dropifyElements[this.id] = true;
});
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.beforeClear', function(event, element) {
    id = event.target.id;
    if(dropifyElements[id]) {
        var x = false;
        return swal({   
            title: "Are you sure?",   
            text: "You will not be able undo this operation!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel please!",   
            closeOnConfirm: false,   
            closeOnCancel: false 
        }, function(isConfirm){   
            if (isConfirm) {
                x = true;
            } else {     
                swal({
                    title:"Cancelled",
                    text:"Delete Cancelled :)",
                    type:"error",
                    timer: 2000,
                });
                x = true;
            } 
        });
        return x;
        //return confirm("Do you really want to delete this image?");
        // return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
    }
});

Solution

  • Okay so the input element is passed through the event handler so if the user really wants to delete it all you have to do is return false on the handler by default, then if the user clicks the confirm on the swal instance you just nuke the value of the input element. I don't have your code, but this should work.

    var pathURL = "file_path/";
    var dropifyElements = {};
    $('.dropify').each(function() {
        dropifyElements[this.id] = true;
    });
    var drEvent = $('.dropify').dropify();
    
    drEvent.on('dropify.beforeClear', function(event, element) {
        id = event.target.id;
        if(dropifyElements[id]) {
    
            swal({   
                title: "Are you sure?",   
                text: "You will not be able undo this operation!",   
                type: "warning",   
                showCancelButton: true,   
                confirmButtonColor: "#DD6B55",   
                confirmButtonText: "Yes, delete it!",   
                cancelButtonText: "No, cancel please!",   
                closeOnConfirm: false,   
                closeOnCancel: false 
            }, isConfirm => {   
                if (isConfirm) {
                    element.value = "";
                } else {     
                    swal({
                        title:"Cancelled",
                        text:"Delete Cancelled :)",
                        type:"error",
                        timer: 2000,
                    });
                } 
            });
    
            return false;
    
        }
    });