Как я могу исправить эту ошибку "Dropzone уже прилагается"?

У меня есть этот образец:

Мне удалось создать эту форму, но, к сожалению, она не работает, потому что я получаю сообщение об ошибке.

Dropzone already attached.

КОД HTML:

<div class="dropzone dz-clickable" id="myDrop">
  <div class="dz-default dz-message" data-dz-message="">
    <span>Drop files here to upload</span>
  </div>
</div>

КОД JS:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

Я настроил Dropzone.autoDiscover = false;, но, к сожалению, все еще не работает.

Подскажите, пожалуйста, в чем причина этой проблемы?

Ответ 1

Вы должны использовать

var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

или

$("div#myDrop").dropzone({ url: "/file/post" });

не оба. В основном то, что вы делаете, вызывает одно и то же дважды.

Ответ 2

Определение ниже кода во всем мире поможет:

Dropzone.autoDiscover = false;

Ответ 3

Эта ошибка также может произойти, если элемент уже имеет класс dropzone.

Однако, если это удалено, по какой-то причине стиль по умолчанию не будет применяться после запуска Dropzone. Моим единственным обходным решением является создание пользовательского стиля для этого элемента.

Ответ 4

<script>
  Dropzone.autoDiscover = false;
  $(document).ready(function() {
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>

вместо

<script>
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>

Ответ 5

После поиска и тестирования нескольких решений в сети, я получил одно из лучших решений для решения этой проблемы.

HTML

<div id="some-dropzone" class="dropzone"></div>

JavaScript

Dropzone.options.someDropzone = {
  url: "/file/post"
};

Ответ 6

Это мой хакерский обходной путь. Он в основном проверяет, загружена ли dropzone как DOM, а если нет, то создаст его.

    function dropzoneExists(selector) {
        var elements = $(selector).find('.dz-default');
        return elements.length > 0;
    }

    var exists = dropzoneExists('div#photo_dropzone');
    if(exists) return;

    $('div#photo_dropzone').dropzone({
       ...
       ...
    });

ОБНОВЛЕНИЕ: предлагается выяснить, почему дропзона инициируется дважды. Исправление это правильный путь, и этот ответ - только технически долгий обходной путь.

Ответ 7

Я исправил эту проблему, отредактировав dropzone.js. просто зайдите в dropzone.js и замените

if (this.element.dropzone) {
    throw new Error("Dropzone already attached.");
  }

if (this.element.dropzone) {
    return this.element.dropzone;
 }

это решение изначально найдено Хаскаало, опубликовано на GitHub вопросов

Ответ 8

иногда это потому, что у вас есть два элемента html с тем же идентификатором dropzone.

<div id="dropzone" class="dropzone"></div>

<div id="dropzone" class="dropzone"></div>

Ответ 9

Вы можете объединить свой идентификатор "myDrop" с некоторым уникальным значением для каждого отдельного экземпляра Dropzone.

Пример:

 html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>

 in func: 
 this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);

Ответ 10

Это решение не работает для меня при использовании Angular:

Dropzone.autoDiscover = false;

Единственный способ заставить его работать с Angular без необходимости редактирования файла dropzone.js заключался в следующем:

@ViewChild('containerElement') containerElement: ElementRef;

...    

/* Make sure all Dropzone instances are destroyed */
if (Dropzone.instances.length > 0) {
    Dropzone.instances.forEach((e: any) => {
        e.off();
        e.destroy();
    });
}

/* Remove existing dropzone element from the DOM */
const element: any = document.getElementById('my-dropzone');
element.remove();

/* Create new dropzone DOM element */
const html =
' <div id="my-dropzone" class="dropzone">' +
    '<div class="dz-message">' +
    '<i class="fad fa-cloud-upload-alt dz-message-icon"></i>' +
    '<p>Drop files, or click to browse</p>' +
    '</div>' +
'</div>';
this.containerElement.nativeElement.insertAdjacentHTML('beforeend', html);