File upload in dropzone is working even when clickable is false

Question

I am initializing a dropzone element and based on some parameters I should toggle the clickable function so that some users are able to upload the files and some are not. I am setting the value of the clickable function to false but still the element is clickable. How can I rectify this error?

function initializeAttachmentsDropzone(){
    Dropzone.autoDiscover = false;
    // Dropzone stuff
    myDropzone = new Dropzone("div#attachments", { url: "/app/attachments/",
                        paramName: "attachments",
                        // maxFiles: 10,
                        uploadMultiple: true,
                        addRemoveLinks: true,
                        autoProcessQueue: false,
                        parallelUploads: 10,
                        maxFilesize: 2000,
                        thumbnailHeight: 250,
                        thumbnailWidth: 250,
                        dictRemoveFileConfirmation: "Are you sure you want to delete this file?",
                        accept: function(file, done) {
                          if (file.size == 0) {
                            done("Empty files will not be uploaded.");
                          }
                          else { done(); }
                        },
                        headers: {
                            "X-CSRFToken": csrftoken
                        },
                        init: function(){
                            this.removeAllFiles();

                        }
    });
    myDropzone.on("removedfile", deleteAttachment);
}




function disableFieldsOnUpdate(){
    if ($("#page_details").val()){
        $(".dev-page").prop("disabled", true);
        myDropzone.options.clickable = false;
    }
    else {
        $(".dev-page").prop("disabled", false);
        myDropzone.options.clickable = true;
    }
}


$(document).ready(function(){
    initializeAttachmentsDropzone();
    disableFieldsOnUpdate();
});

Here in the browser when I check the value of clickable it is false but even then I am able to click the attachments element. How can I toggle the functionality as per the requirement?

EDIT

The only solution that worked for me is as below:

let isRemoveEnabledInAttachments;

function getRemoveEnabled() {
    if ($("#page_details").val()){
        isRemoveEnabledInAttachments = false;
        }
    if ($("#page_details").attr("update_fields") && $("#page_details").attr("has_permission") == "True"){
        isRemoveEnabledInAttachments = true;
    }
    return isRemoveEnabledInAttachments;
}

function initializeAttachmentsDropzone(){
    Dropzone.autoDiscover = false;
    // Dropzone stuff
    myDropzone = new Dropzone("div#attachments", { url: "/app/attachments/",
                        paramName: "attachments",
                        // maxFiles: 10,
                        uploadMultiple: true,
                        addRemoveLinks: true,
                        autoProcessQueue: false,
                        parallelUploads: 10,
                        maxFilesize: 2000,
                        thumbnailHeight: 250,
                        thumbnailWidth: 250,
                        dictRemoveFileConfirmation: "Are you sure you want to delete this file?",
                        accept: function(file, done) {
                          if (file.size == 0) {
                            done("Empty files will not be uploaded.");
                          }
                          else { done(); }
                        },
                        headers: {
                            "X-CSRFToken": csrftoken
                        },
                        init: function(){
                            this.removeAllFiles();
                            if (isRemoveEnabledInAttachments) {
                                this.enable();
                            } else {
                                this.disable();
                            }

                        }
    });
    myDropzone.on("removedfile", deleteAttachment);
}

But here even if I disable the remove file link is shown.

EDIT 2

I had to add

this.options.addRemoveLinks = false;

inside the init function itself. Even setting it as global variable and using Dropzone.options.myDropzone.options as stated in the comments did not work.

Answer 1

replace your function as below:

    function disableFieldsOnUpdate(){
        if ($("#page_details").val()){
            $(".dz-hidden-input").prop("disabled",true);
         
        }
        else 
{
        $(".dz-hidden-input").prop("disabled",false);
        }
    }