Dropzone Replace Remove file prompt confirmation with Modal BS4 - modal-dialog

Question

I have try to change the pront confirmation of dropzone with a modal confirmation from bootstrap with this code:
Modal:
<div class="modal inmodal fade" id="RemoveFileModal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header errormdg">
<button type="button" class="close" data-dismiss="modal"><i class="fas fa-window-close text-white"></i><span class="sr-only">Close</span></button>
<h4 class="modal-title">Cuidado: Estas Intentando Remover un Archivo.</h4>
</div>
<div class="modal-body">
<p>
Por algún motivo el sistema detecto que intentaste Remover un Archivo, Ten en cuenta que el archivo removido no podrás subirlo al sistema.<br> Este aviso es para que tengas en cuenta que si aceptas el archivo que remueves no será guardado en la Aplicación.<br><br>
Presiona Aceptar para Remover el archivo y Salir de la pantalla.<br>
Presiona Cancelar para Regresar.<br>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-cls-error" id="outAceptar" data-dismiss="modal">Aceptar</button>
<button type="button" class="btn btn-white" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
and use this Script for dropzone to catch the remove file event and display the modal:
$('div.dropzone').each(function() {
$(this).dropzone({
autoProcessQueue: true,
url: "/",
maxFilesize: window.SIS.uploadFiles.size,
maxFiles: window.SIS.uploadFiles.max,
acceptedFiles: 'application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
dictDefaultMessage: "<strong>Coloque los archivos Aqui. </strong></br> (Peso Maximo 2Mb, Se Aceptan los Siguientes Formatos: jpg, pdf, xls, xlsx.)",
addRemoveLinks: true,
dictCancelUpload: 'Cancelar Subida',
dictRemoveFile: 'Quitar Archivo',
clickable: true,
init: function() {
this.on("removedfile", function(data) {
var IsRemove = false;
$('#RemoveFileModal').modal('toggle').on('click', '#outAceptar', function(e) {
IsRemove = true;
});
return IsRemove;
});
},
});
});
the Main problem is that toogle modal not stop the remove file event to catch if user click "aceptar" or "cancelar". spanish option of accept and cancel.
the script show the modal but continue remove file in background.
Update
i have try with this but not work:
removedfile: function(file) {
$('#RemoveFileModal').modal('toggle').on('click', '#outAceptar', function(e) {
//myDropzone.removeFile(file);
return true;
});
$('#RemoveFileModal').modal('toggle').on('click', '#outCancelar', function(e) {
return false;
});
},

Answer 1

Using the removed file event is a good way:
// Called whenever a file is removed.
removedfile: function removedfile(file) {
$('#yourModalId').modal({
backdrop: 'static',
keyboard: false
})
$('#yourModalDeleteButton').click({file: file, self: this}, removeFile);
function removeFile(event)
{
$('#yourModalId').modal('hide');
// user confirmed , remove your file
}
},
As u can see I am passing the file object and this to my function because you will need atleast file object to remove the file. (Maybe not this it depends on how you handle file removal).