Resumen del Problema
El problema presentado se relaciona con el uso de Dropzone.js para manejar la subida de archivos. Específicamente, cuando un usuario intenta cargar un archivo que excede el tamaño máximo permitido, se desencadena el evento queuecomplete
, causando que la ventana navegue a otra página. El objetivo es gestionar esta situación para evitar que el evento se dispare en casos de archivos demasiado grandes.
Solución Propuesta
-
Desactivar el Evento
queuecomplete
para Archivos Inválidos: Modificar el comportamiento del eventoaccept
para que, al detectar un archivo que excede el tamaño máximo, se evite llamar adone()
y así no activar el eventoqueuecomplete
. - Implementar la Lógica de Validación Correcta: Asegúrate de que la lógica que verifica el tamaño del archivo esté correctamente implementada antes de permitir que se procese el archivo. De esta forma, si el archivo no es válido, se elimina y se muestra un mensaje al usuario.
Código Modificado
var myDropzone = new Dropzone("#dropzoneFileUpload", {
url: appRootUrl + "someUrl",
autoProcessQueue:false,
paramName: "file",
addRemoveLinks: true,
dictRemoveFile: "Eliminar fichero",
dictCancelUpload: "Cancelar subida",
maxFiles: 20,
parallelUploads: 20,
maxFilesize: 50, // Tamaño máximo en MB
init: function () {
thisDropzone = this;
},
accept: function(file, done) {
var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
// Cambiar la vista según el tipo de archivo
switch (file.type) {
case 'application/pdf':
thumbnail.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/PDF_icon_-_grey-red_-_16px.svg/120px-PDF_icon_-_grey-red_-_16px.svg.png?20210526135026)');
break;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
thumbnail.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/f/fb/.docx_icon.svg)');
break;
case 'application/vnd.ms-excel':
thumbnail.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Xls_icon_%282000-03%29.svg/1024px-Xls_icon_%282000-03%29.svg.png)');
break;
default:
break;
}
// Verificar el tamaño del archivo
if (file.size > this.options.maxFilesize * 1024 * 1024) {
thisDropzone.removeFile(file);
$("#aviso").text("El archivo '"+file.name+"' excede el tamaño máximo permitido (" + this.options.maxFilesize + "Mb).");
$("#myModalAviso").modal("show");
// No llamar a done() para evitar que se active queuecomplete
} else if (checkFileName(file.name)) {
thisDropzone.removeFile(file);
$("#aviso").text("El archivo '"+file.name+"' no se admite debido a que el nombre del archivo contiene un punto.");
$("#myModalAviso").modal("show");
// No llamar a done() para evitar que se active queuecomplete
} else {
done(); // Llamar a done() solo si el archivo es válido
}
}
});
myDropzone.on("queuecomplete", function() {
let detalle = $("#detalle").val();
if(detalle == "true"){
window.location.href = "/someUrl/"+$("#id").val();
} else {
window.location.href = "/someUrl/";
}
});
Conclusión
Con las modificaciones propuestas, la configuración del Dropzone evitará que el evento queuecomplete
se dispare si el archivo que el usuario intenta cargar excede el tamaño máximo permitido, ayudando a mejorar la experiencia del usuario y asegurando que se manejen adecuadamente las condiciones de error en las subidas de archivos.