I have a dropzone implemented with JavaScript. I want to handle situations where a user tries to upload a file that exceeds the maximum file size. Specifically, I want to remove the file and display a modal alert informing the user about the issue.

My problem is that when someone uploads a file that exceeds the maximum file size, it triggers the queuecomplete event and the window navigates to another page. How can I manage this issue without triggering the queuecomplete event?

This is the dropzone:

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,
    init: function () {
        thisDropzone = this;
    },
    accept: function(file, done) {
        var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
        //Cuando alguien sube un archivo al dropzone este switchcase pinta imagenes segun el tipo de archivo
        switch (file.type) {
          case 'application/pdf':
            thumbnail.css('background', 'url(.svg/120px-PDF_icon_-_grey-red_-_16px.svg.png?20210526135026)');
            break;
          case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
            thumbnail.css('background', 'url(/.docx_icon.svg)');
            break;
          case 'application/vnd.ms-excel':
                thumbnail.css('background', 'url(.svg/1024px-Xls_icon_%282000-03%29.svg.png)');
            break;
          default:
            break;
        }
        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");
        }
        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");
            return;
        }
        else{
            done();
        }
      }
});

myDropzone.on("queuecomplete", function() {
    let detalle = $("#detalle").val();
    if(detalle == "true"){
        window.location.href = "/someUrl/"+$("#id").val();
    }
    else{
        window.location.href = "/someUrl/";
    }
});

This are some other ways i tried:

myDropzone.on("error", function(file, message) { 
    alert(message);
    this.removeFile(file); 
});

myDropzone.on("addedfile", function(file) {
    event.preventDefault()
    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");
    }
});

Thank you.

I have a dropzone implemented with JavaScript. I want to handle situations where a user tries to upload a file that exceeds the maximum file size. Specifically, I want to remove the file and display a modal alert informing the user about the issue.

My problem is that when someone uploads a file that exceeds the maximum file size, it triggers the queuecomplete event and the window navigates to another page. How can I manage this issue without triggering the queuecomplete event?

This is the dropzone:

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,
    init: function () {
        thisDropzone = this;
    },
    accept: function(file, done) {
        var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
        //Cuando alguien sube un archivo al dropzone este switchcase pinta imagenes segun el tipo de archivo
        switch (file.type) {
          case 'application/pdf':
            thumbnail.css('background', 'url(https://upload.wikimedia./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./wikipedia/commons/f/fb/.docx_icon.svg)');
            break;
          case 'application/vnd.ms-excel':
                thumbnail.css('background', 'url(https://upload.wikimedia./wikipedia/commons/thumb/1/15/Xls_icon_%282000-03%29.svg/1024px-Xls_icon_%282000-03%29.svg.png)');
            break;
          default:
            break;
        }
        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");
        }
        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");
            return;
        }
        else{
            done();
        }
      }
});

myDropzone.on("queuecomplete", function() {
    let detalle = $("#detalle").val();
    if(detalle == "true"){
        window.location.href = "/someUrl/"+$("#id").val();
    }
    else{
        window.location.href = "/someUrl/";
    }
});

This are some other ways i tried:

myDropzone.on("error", function(file, message) { 
    alert(message);
    this.removeFile(file); 
});

myDropzone.on("addedfile", function(file) {
    event.preventDefault()
    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");
    }
});

Thank you.

• javascript
• jquery
• dropzone

1 Answer 1

When you call the removeFile method, it will trigger the canceled event which will eventually trigger the queuecomplete event if there are no more files in the Dropzone.

One solution is, in your queuecomplete event handler check if there are files in the Dropzone, before redirecting the user.

myDropzone.on("queuecomplete", function() {
    // You can also use myDropzone..getAcceptedFiles().length
    if(myDropzone.files.length === 0) {
        return;
    }

    let detalle = $("#detalle").val();
    if(detalle == "true"){
        window.location.href = "/someUrl/"+$("#id").val();
    }
    else{
        window.location.href = "/someUrl/";
    }
});