Dropzone stop checkmark and error icons from disappearing

Question

This is my current configuration:

var dropzone = new Dropzone("#dropzone",{
url: "<?php echo site_url($this->data['controller']."/Upload")?>",
params: {
    'transaction_id': "<?php echo $upload_transaction_id; ?>",
    '<?php echo $this->security->get_csrf_token_name();?>': '<?php echo $this->security->get_csrf_hash();?>'
},
acceptedFiles: "application/pdf",
init: function() {
    this.on("success", function(file, responseText) {
        $(".dz-success-mark svg").css("background", "green");
        $(".dz-error-mark").css("display", "none");
        $(".dz-success-mark svg").css('border-radius', '30px');
        $(".dz-success-mark").css("opacity","1");
        index++;
        console.log("Response Text: "+responseText);
        if(index===dropzone.files.length){
            count_uploaded_files(tid);
            $(".dz-hidden-input").prop("disabled",true);
            $('#ajax_success'). css('display','block');
            $('#ajax_success_content').html("Upload completed: "+dropzone.files.length+" files uploaded");
        }
    });
     this.on("error", function(file, responseText) {
      $(".dz-error-mark svg").css("background", "red");
      $(".dz-success-mark").css("display", "none");
        $(".dz-error-mark svg").css('border-radius', '30px')
        $(".dz-error-mark").css("opacity","1");
        console.log("Error");
    });
}

When a file upload has been successful, a green checkmark appears and disappears after a few seconds.

Currently the behaviour is after the checkmark has disappeared, a checkmark will appear on my file due to the opacity set to 1. However, this causes all the un-uploaded files to have a green checkmark as well.

Is there a way to set it so that only the current uploaded file shows the green checkmark or prevent the checkmark from disappearing in the first place?

Answer 1

You're taking all elements with the class .dz-success-mark, and setting opacity to 1 to all elements, so it will not work.

You can try to use this SCSS to override the default behaviour of the markers, it had works for me.

// Override the passing-through animation with my own custom passing-through-custom animation
.dropzone .dz-preview.dz-error .dz-error-mark {
    -webkit-animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
    animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
    animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
}
// Set the opacity to 1 after upload completion/error (Dropzone js will put the class .dz-success or .error-mark on the .dz-preview)
.dropzone {
    .dz-preview.dz-error {
        .dz-error-mark{
            opacity: 1 !important;
        }
    }
    .dz-preview.dz-success {
        .dz-success-mark {
            opacity: 1 !important;
        }
    }
}
// From 0% to 70% nothing change from the original passing-through animation, but the 100% keyframe is mantaing the same value of the 70%, so the marker is not disappearing in this way

//Animation for all browser
@-webkit-keyframes passing-through-custom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-moz-keyframes passing-through-custom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes passing-through-custom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

or CSS if you're not using SCSS:

.dropzone .dz-preview.dz-error .dz-error-mark {
    -webkit-animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
    animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
    animation: 3s cubic-bezier(0.77, 0, 0.175, 1) passing-through-custom !important;
}
.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1 !important;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
    opacity: 1 !important;
}

@-webkit-keyframes passing-through-custom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-moz-keyframes passing-through-custom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes passing-through-custom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}