Как использовать "сладкое оповещение" для подтверждения удаления изображения для dropify.js?

Question

Я хочу использовать сладкое предупреждение перед удалением изображения. Но это не работает. Это работает, если я использую JavaScript по умолчанию для подтверждения. Я пытался использовать async и ждать, но это не помогло. Как я могу это исправить / отладить?

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 + "\" ?");
    }
});

Answer 1

Хорошо, так что input элемент передается через обработчик событий, поэтому, если пользователь действительно хочет удалить его, все, что вам нужно сделать, это вернуть false в обработчике по умолчанию, а затем, если пользователь щелкнет подтверждение на экземпляре swal, вы просто обнуляете значение элемента input, У меня нет вашего кода, но это должно работать.

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;

    }
});

Answer 2

Может быть, это сработает!

dropifyUpload.on('dropify.beforeClear', function (event, element) {

        swal({
            title: "¿Esta seguro que desea eliminarlo?",
            text: "¡Una vez confirmado no habrá vuelta atrás!",
            icon: 'warning',
            buttons: {
                cancel: 'Cancelar',
                delete: 'OK'
            }
        }).then(function (result) {
            if (result == "delete") {
                element.input.trigger($.Event("dropify.afterClear"), [element]);
            }
        })

        return false;
    });

Answer 3

Я читаю ответ и не работаю для меня, но я пишу другую идею

var dropifyElements = {};
$('.dropify').each(function () {
    dropifyElements[this.id] = false;
});

dropElements.on('dropify.beforeClear', function (event, element) {
    id = event.target.id;
    if (!dropifyElements[id]) {
        swal({
            title: "¿Estás seguro?",
            text: "¿Realmente deseas eliminar el archivo \"" + element.file.name + "\" ?",
            icon: "warning",
            buttons: {
                cancel: "Cancelar",
                acept: "Aceptar"
            },
            dangerMode: true
        }).then((action) => {
            if (action == "acept") {
                dropifyElements[id] = true;
                element.clearElement();
            }
        });
        return false;
    }
    else
    {
        dropifyElements[id] = false;
        return true;
    }
});

Answer 4

Этот код также решит проблему, связанную с нажатием кнопки отмены всплывающего окна.

var drEvent = $('.dropify').dropify();

var hideConfirmBox = false;

drEvent.on('dropify.beforeClear', function(event, element){

    if (hideConfirmBox == false) {
        swal({
            title: 'Do you want to remove?',
            text: 'This will remove the selected image.',
            buttons: {
              cancel: true,
              confirm: {
                text: 'Yes, remove it!',
                value: 'proceed'
              }
            },
            dangerMode: true
        }).then((value) => {
            if (value == 'proceed') {
                $("body").trigger("click")
                hideConfirmBox = true;
                $(this).next('button.dropify-clear').trigger('click');
            }
        });
    }


    return hideConfirmBox;
});

drEvent.on('dropify.afterClear', function(event, element){
    hideConfirmBox = false;

    // call ur ajax here for deleting on clicking yes in sweet alert pop-up

});