Несколько экземпляров Dropzone.js – загрузка файла в неправильный экземпляр ⇐ Jquery

[Anonymous]

Недавно я обновил dropzone.js со старой версии (2012 г.) до последней. Я использую это в своей пользовательской PHP CMS для обработки загрузки изображений. В моей CMS есть раздел для управления изображениями. На странице отображается несколько форм изображений, и дополнительные формы изображений можно динамически добавлять на страницу с помощью Ajax. Это отлично работает. Однако моя проблема возникает, когда я действительно загружаю файл - новый dropzone.js странным образом добавляет файл в неправильный экземпляр dropzone.
В качестве примера. Если у меня 4 экземпляра, первый экземпляр загружается во 2-й экземпляр, а остальные экземпляры загружаются в 1-й экземпляр. Очень странно.
Мой Javascript выглядит следующим образом:

// 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();

До обновления до последней версии dropzone.js все работало нормально. Не знаю, что я здесь делаю не так.
Когда я проверяю разметку страницы через браузер, я вижу, что dropzone.js вставляет 4 скрытых поля файла. Проблема в том, что эти 4 поля идентичны. Те же атрибуты. Ничего уникального, чтобы прикрепить их к конкретному экземпляру элементов Dropzone на странице.
Чего мне здесь не хватает?
Последняя версия jQuery, пользовательский интерфейс jQuery , и dropzone.js загружаются.
Пример вывода внешнего интерфейса одного из элементов .page-image выглядит следующим образом:









Click image to update












Подробнее здесь: https://stackoverflow.com/questions/784 ... g-instance