Im using dropzone.js and loading it using ajax.

My menu ID = "#menu" The upload file should appear in "#div1"

The callback function is not working. I replaced Dropzone.discover by alert("test");

(document).ready(function() {

    $("#menu").click(function(){

    $("#div1").load("upload.php",null, function(){
        Dropzone.discover();
    });

Note: I tried the code below, but it didnt work.

$("#div1").load("upload.php", function(){
    Dropzone.discover();
});

Im using dropzone.js and loading it using ajax.

My menu ID = "#menu" The upload file should appear in "#div1"

The callback function is not working. I replaced Dropzone.discover by alert("test");

(document).ready(function() {

    $("#menu").click(function(){

    $("#div1").load("upload.php",null, function(){
        Dropzone.discover();
    });

Note: I tried the code below, but it didnt work.

$("#div1").load("upload.php", function(){
    Dropzone.discover();
});

• javascript
• jquery
• ajax

• 1 +1 for the question and the sample code as I learned about Dropzone.discover() today. Are you still having issues? – Shawn Vader Commented May 2, 2014 at 10:08
• Does #div1 really exists? As stated stackoverflow./a/18420091/2049986, the last sample code should just work. – Jacob van Lingen Commented Aug 6, 2014 at 7:24

2 Answers 2

I had a problem getting a Dropzone that was loaded via Ajax to work and discovered that adding the Dropzone.discover(); call fixed it for me.

You should define dropzone on #dive and add your events in init function of dropzone to change it's options related to each #menu. it's best way.

fore example:

var myDropzone = new Dropzone("#div1",{
    url: '/test.php',
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    removedfile: function(file) {
        $.get('remove.php',function(data){
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        });
    },
    init: function() {
        var thisDropzone = this;
        $('body').on('click','a.menu',function(event){
            href = $(this).attr('href');

            thisDropzone.options.url = href;
        });

        $("body").on('click','#btnRemoveAll',function () {
                thisDropzone.removeAllFiles();
            }
        );

    }
});