Comment puis-je autoriser le retrait de plus d'un fichier téléchargé avec dropzone en utilisant le dialogue de confirmation personnalisé?

Question

Je veux remplacer la manière par défaut que Dropzone gère les dialogues de confirmation lors de la suppression des fichiers téléchargés et j'y suis presque dans une certaine mesure. Voici mon code.

Dropzone.confirm = function(question, accepted, rejected) { 
    showConfirm(question); 
    $(document).on('click', '#accept-confirm', function() { 
     hideConfirm(); 
     accepted(); 
    }); 
} 

showConfirm = function(question) { 
    var confirm_dialogue = '<div id="confirm-dialogue"><span class="question">'+question+'</span><button id="deny-confirm" class="button">Cancel</button><button id="accept-confirm" class="button">Yes</button></div>'; 
    $('body').append(confirm_dialogue).addClass('is-showing-confirm'); 
} 

hideConfirm = function() { 
    $('body').removeClass('is-showing-confirm'); 
    let dialogue = document.getElementById('confirm-dialogue'); 
    dialogue.parentNode.removeChild(dialogue); 
} 

Je peux cliquer sur mon bouton Supprimer et ma confirmation personnalisée est affichée. Je peux confirmer la suppression et la vignette est supprimée.

Le problème est que je ne peux le faire que pour une image. Pour toutes les autres images que je veux supprimer je reçois juste l'erreur suivante dans ma console.

Uncaught TypeError: Cannot read property 'removeChild' of null

Answer 1

Vous devez utiliser .off() avant d'utiliser .on() parce que les événements qui sont appliqués à ce bouton sont appelés plusieurs fois comme,

Dropzone.confirm = function(question, accepted, rejected) { 
    showConfirm(question); 
    $(document).off('click', '#accept-confirm').on('click', '#accept-confirm', function() { 
     hideConfirm(); 
     accepted(); 
    }); 
} 

Ou vous pouvez l'utiliser une fois et placez votre fonction en dehors de la Dropzone.confirm comme,

Dropzone.confirm = function(question, accepted, rejected) { 
    showConfirm(question); 
} 
// now it will be called once only, 
$(document).on('click', '#accept-confirm', function() { 
    hideConfirm(); 
    accepted(); 
}); 

Et pour supprimer un élément de DOM utiliser .remove(),

hideConfirm = function() { 
    $('body').removeClass('is-showing-confirm'); 
    $('#confirm-dialogue').remove(); 
} 

Vous pouvez vérifier la longueur de l'élément (que vous voulez supprimer) comme,

dialogue && dialogue.parentNode.removeChild(dialogue);