Using dropzone.js in knockout binding

Question

I am trying to get dropzone to work as a knockout binding. I really would like to be able to ...

ko.bindingHandlers.dropzone = {
    init: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
        $(element).dropzone({ url: 'some/tightly/bound/uri});
    }
}

.. but I can not. Uri is dynamic, based on the data entered in the viewmodel, so this is what I came up with so far:

var dropzoneObject; // probably should be this.dropzoneObject

ko.bindingHandlers.dropzone = {
    init: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
        var url = allBindingsAccessor().urlPath || "unknown";
        dropzoneObject = new Dropzone("div#" + element.id, {
            url: url, 
            init: ...,
            etc
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
        var url = allBindingsAccessor().urlPath || "unknown";
        dropzoneObject.options = {
            url: url
        };
    }
}

but when I check this, I get the following error:

Uncaught TypeError: Cannot read property 'trim' of undefinedDropzone.defaultOptions.addedfile 
@ dropzone.js:252Emitter.emit @ dropzone.js:58Dropzone.addFile 
@ dropzone.js:956(anonymous function) @ dropzone.js:563

Why is this undefinedDropzone? What did I miss?

thank

Answer 1

I found the answer, my update method completed by writing all the parameters (including the standard ones), and not updating it like this:

....
update: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
    var url = allBindingsAccessor().urlPath || "unknown";
    dropzoneObject.options = {
        url: url
    };
}
....

Must read:

update: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
    var url = allBindingsAccessor().urlPath || "unknown";
    dropzoneObject.options.url = url;
}

Hope this helps someone!