I recently updated my dropzone.js from an old version (2012) to the latest one. I am using this inside my custom PHP CMS to handle image uploads. I have a section in my CMS for managing images. Multiple image forms are displayed on the page, and more image forms can be dynamically added to the page via Ajax. That works fine. However my problem arises when I actually upload a file – the new dropzone.js is strangely adding the file to the wrong dropzone instance.

As an example. If I have 4 instances, the 1st instance uploads to the 2nd instance, and the remaining instances upload to the 1st instance. Very odd.

My Javascript is as follows:

        // INITIALISE DROPZONE
        $(".multi-dropzone").each(function(i, element) {

            // CHECK THERE ISN'T A DROPZONE ALREADY ON THERE
            if ($(this).get(0).dropzone) { return; }

            // GET THE IMAGE ID TO PASS INTO PROCESSING
            let imageid = $(this).data("imageid");
            let pageid = $(this).data("pageid");

            $(this).dropzone({
                url: 'edit.php?id='+pageid+'&mode=update-image&img_id='+imageid,
                uploadMultiple: false,
                maxFilesize: 10, // 10MB
                parallelUploads: 1,
                clickable:  '.dropzone',
                createImageThumbnails: false,
                dictFileTooBig: "File is too big ({{filesize}}MB). Max filesize: {{maxFilesize}}MB.",
                acceptedFiles: "image/*",
                init: function() {

                    var self = this;

                    // WHEN ADDING A FILE
                    self.on('addedfile', function(file) {

                        $(this).css("border", "solid red 2px");

                        console.log("Added file to Dropzone with image ID: " + imageid);

                        // REMOVE OLD PREVIEW
                        if ($(this.element).find('.dz-preview').length > 1) {
                            $(this.element).find('.dz-preview').first().remove();
                        }
                    });


                    // SUCCESSFULLY ADDED
                    self.on('success', function(file, response) {

                        // UPDATE HIDDEN IMAGE NAME
                        alert(response);
                        $(self.element).find('.img_name').val(response);

                    });

                }
            });
        });
    }
    // ENABLE ALL DROPZONES
    init_image_dropzones();

Prior to updating to the latest dropzone.js, this worked fine. Unsure what I’m doing wrong here.

When I inspect the page markup via the browser, I can see that dropzone.js is inserting 4 hidden file fields. The issue is that these 4 fields are identical. Same attributes. Nothing unique to attach them to a particular instance of the dropzone elements on the page.

What am I missing here?

Latest jQuery, jQuery UI, and dropzone.js all being loaded.