El tamaño máximo de archivo en Dropzone.js activa el evento queuecomplete.

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

  1. Desactivar el Evento queuecomplete para Archivos Inválidos: Modificar el comportamiento del evento accept para que, al detectar un archivo que excede el tamaño máximo, se evite llamar a done() y así no activar el evento queuecomplete.

  2. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *