Skip to content

Instantly share code, notes, and snippets.

@csim
Last active August 30, 2016 14:18
Show Gist options
  • Save csim/4513ae3316104e6f474d to your computer and use it in GitHub Desktop.
Save csim/4513ae3316104e6f474d to your computer and use it in GitHub Desktop.
Dropzone Knockout binding
ko.bindingHandlers.dropzone = {
init: function(element, valueAccessor)
{
var value = ko.unwrap(valueAccessor());
var options = {
maxFileSize: 15,
createImageThumbnails: false,
};
$.extend(options, value);
$(element).addClass('dropzone');
new Dropzone(element, options); // jshint ignore:line
}
};
<div data-bind="dropzone: { url: '/upload', success: attachmentSuccess }"></div>
@petericebear
Copy link

Can you connect it to a variable?
Like I have this variabel: self.imagesCompany = ko.observableArray();

Can you do something like:

What im trying to do is getting a list of the uploaded images into that variabel inside my viewModal.

@a904guy
Copy link

a904guy commented Aug 4, 2015

@petericebear

You would need to make a complete function that populated your observableArray and pass it to this binding like so:

<div data-bind="dropzone: { url: '/upload', complete: myCompleteFunction }"></div>

@irfan-yusanif
Copy link

hi I am adding existing images to dropzone. my custom binding code is:

ko.bindingHandlers.dropzone = {
            init: function (element, valueAccessor) {
                var value = ko.unwrap(valueAccessor());

                var options = {
                    maxFileSize: 15,
                    uploadMultiple: true,
                    parallelUploads: 100,
                    maxFiles: 30,
                    addRemoveLinks: true,
                    acceptedFiles: ".jpeg,.jpg,.png,.gif",
                    init: function () {
                        var myDropzone = this;
                        this.on("success", function (file, serverFileName) {
                            fileList = [];
                            i = 1;
                            var abc = $.map(serverFileName, function (item) { return (item); });
                            $.each(abc, function (index, value) {
                                fileList[i] = { "fileName": value, "fileId": i++ };
                            })
                        });
                        if (images) {  //here
                            for (i = 0; i < images.length; i++) {
                                myDropzone.emit("addedfile", images[i]);
                                myDropzone.emit("thumbnail", images[i], "/Images/Ads/");
                                myDropzone.emit("complete", images[i]);
                            }
                        }
                    }
                };

                $.extend(options, value);

                $(element).addClass('dropzone');
                new Dropzone(element, options); 
            }
        };

I am fetching existing images data through ajax but the above code is executed before ajax response is received and existing images are not shown. How can I handle this?

@phily245
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment