How to disable Dropzone.js after choosing file?

Question

In my dropzone I first choose file to save, and then click save button to save it. So, my questuion is: how can I disable dropzone area after choosing file? I've tried like this

accept: function (file, done) {
        if (file.type != "image/jpeg" && file.type != "image/png" && file.type != "image/gif") {
            $('.file-row').find('img').attr('src', '/../Content/images/decline.png');
            $('.file-row').find('img').attr('class', 'error-img');
            done("Error! Files of this type are not accepted");
         }
        else {
            $('.file-row').find('img').attr('src', '/../Content/images/accept.png');
            $('.file-row').find('img').attr('class', 'accept-img');
            done();
            logoDropzone.disable();
        }
    }

But this code don't allow me to upload file, "Upload canceled" error pops-up. What can I do?

Answer 1

You can use:

this.element.style.cursor = "not-allowed";
this.hiddenFileInput.style.cursor = "not-allowed";
this.hiddenFileInput.disabled = true;

use it in the logic you want and it will disable the dropzone visually and functionally.

NOT: here "this" refers to the dropzone element itself

Answer 2

myDropzone.on('maxfilesreached', function() {
    myDropzone.removeEventListeners();
});
myDropzone.on('removedfile', function (file) {
    myDropzone.setupEventListeners();
});

Don't forget init _updateMaxFilesReachedClass if you have files from your server.

myDropzone._updateMaxFilesReachedClass()

Answer 3

Better use standart dropzone.js events. They are documented here. You can simple hide and show input

logoDropzone.on("addedfile", function (file) {
    $('.dz-input').hide();
})

logoDropzone.on("deletedfile", function (file) {
    $('.dz-input').show();
})