Хочу создать несколько дропзон, используя dropzone.js

Question

Я делаю приложение для сравнения, которое имеет две разные области перетаскивания. каждый из них должен действовать как единая зона сброса (для замены или удаления каждого изображения).

вопрос:

var previewaDropzone = new Dropzone("div#previewa",{url:'/url1.json'});
var previewbDropzone = new Dropzone("div#previewb",{url:'/url2.json'});

но исключение броска зоны

Dropzone уже подключен.

Примечание: я не могу использовать шаблоны dropzone.js, потому что обе области находятся в разных местах

каким-либо образом достичь вышеуказанной функциональности с помощью Dropzone?

Answer 1

Из часто задаваемых вопросов Dropzone

Я получаю ошибку "Dropzone уже прикреплен". при создании Dropzone.

Скорее всего, это связано с функцией автоматического обнаружения Dropzone.

Когда запускается Dropzone, он сканирует весь документ и ищет элементы с классом dropzone. Затем он создает экземпляр Dropzone для каждого найденного элемента. Если позже вы создадите экземпляр Dropzone самостоятельно, вы создадите вторую Dropzone, которая вызывает эту ошибку.

Так что вы можете:

Turn off autoDiscover globally like this: Dropzone.autoDiscover = false;, or
Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

You don't have to create an instance of Dropzone programmatically in most situations! It's recommended to leave autoDiscover enabled,

и настройте свою Dropzone в опции init вашей конфигурации.

Далее по FAQ вы можете увидеть пример init() функция, которую вы можете использовать так:

<script>
  // previewa is the configuration for the element that has an id attribute
  // with the value previewa
  Dropzone.options.previewa = {
    init: function() {
      Dropzone.options.previewaDropzone = false;
    }
  };
</script>

Answer 2

Слава сделал это! Я оставлю это здесь на случай, если это кому-то понадобится.

Допустим, у вас есть такие дропзоны:

<div class="dropzone js-dropzone-upload "></div>
<div class="dropzone js-dropzone-upload "></div>

Определите класс для каждой дропзоны, называйте их как хотите. В этом случае они называются js-dropzone-upload.

Итерируйте их через forEach, а затем передайте параметр "element" в конструктор Dropzone:

    <script>
// This prevents Dropzone to autodiscover the elements, 
// allowing you to better control it.
Dropzone.autoDiscover = false;

        Array.prototype.slice.call(document.querySelectorAll('.js-dropzone-upload'))
                            .forEach(element => {
                                var myDropzone = new Dropzone(element, {
                                    url: "/Media/AjaxUpload", maxFilesize: 10, addRemoveLinks: true, maxFiles: 1,
//Omit the "headers" in case you don't need it.
                                    headers: { "__RequestVerificationToken": document.getElementsByName("__RequestVerificationToken")[1]).value }
                                });
                                myDropzone.on("success", function (response) {
                                    document.getElementById('eMediaID').value = response.xhr.response.replace(/\"/g, "");
                                });
                            });

    </script>

Бонус: я сделал это с Webpack и TypeScript:

 if (document.querySelector('.js-ballot-upload') !== null) {
            require(['../dropzone/dropzone-amd-module.min.js'],
            (Dropzone) => {

                Dropzone.autoDiscover = false;

                Array.prototype.slice.call(document.querySelectorAll('.js-ballot-upload'))
                    .forEach(element => {
                        console.log(element);
                        var myDropzone = new Dropzone(element,
                        {
                            url: "/Media/AjaxUpload",
                            maxFilesize: 10,
                            addRemoveLinks: true,
                            maxFiles: 1,
                            headers: {
                                "__RequestVerificationToken": (<HTMLInputElement>document
                                    .getElementsByName("__RequestVerificationToken")[1]).value
                            }
                        });
                        myDropzone.on("success",
                            function(response) {
                                (<HTMLInputElement>document.getElementById('eMediaID')).value = response.xhr.response
                                    .replace(/\"/g, "");
                            });
                    });
            });