我该如何修复"Dropzone already attached"错误？

Question

我有这个样本：

链接

我成功创建了这个表单，但不幸的是它无法工作，因为我遇到了错误。

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;，但不幸的是它仍然没有起作用。

请问您能告诉我是什么导致了这个问题吗？

- Marius

Answer 1

将以下代码全局定义可以帮助：

Dropzone.autoDiscover = false;

- Syed

---

谢谢这个简单而有效的解决方案。我认为问题出在Dropzone插件上，它会自动实例化所有的Dropzone实例。对于大多数插件来说，这通常不会发生，除非你自己实例化它。因此，我们期望Dropzone也是如此。然后，当我们实例化dropzone时，认为它是唯一的实例化时，由于插件自动执行了一个实例化，实际上我们获得了两个实例化。这就是为什么这行代码起作用——通过关闭第一个实例化。 - Paolo Broccardo

我遇到了这个错误："未捕获的错误：Dropzone已经附加。" - Nihilarian

这是真正的答案。如果没有它，dropzone将使用带有.dropzone类的标签。 如果您想在具有此类的元素上使用相同的样式和dropzone，则需要设置此内容。 - Matas Lesinskas

确保在文档加载之前运行此操作，否则dropzone的自动发现功能可能会比你更快（@NikhilRao，我怀疑这就是你遇到的情况）。 - Dem Pilafian

对我有用。我只是在我的$("#picture").dropzone({...})上面添加了它。 - Cesar Bielich

太有用了！我试图将它添加到 window.onload = function () {Dropzone.autoDiscover = false;} 中，但失败了。然后我将它移到全局区域，现在它可以工作了。 - Galley

Answer 2

像这样在 $(document).ready 之前添加 Dropzone.autoDiscover = false:

Dropzone.autoDiscover = false;
$(document).ready(function () {

});

- AgungCode.Com

---

我在编辑中将其删除了，但是你的回答以“And don't forget”结尾。你是不是想再补充一些内容？ - David Buck

应该是最佳答案。 - skywind

Answer 3

你应该使用以下其中一种方式：

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

或

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

不是两者都。基本上你所做的就是两次调用同一件事情。

- drys

---

@Syed的回答非常好！ - Imanali Mamadiev

Answer 4

当元素已经有类名为dropzone时，该错误也会发生。

但是，如果将其移除，则由于某些原因，在启动Dropzone后默认样式不会应用。 我唯一的解决方法是为该元素创建自定义样式。

- inmyth

---

我将autoDiscover设置为false，并且我只有一个class为dropzone的元素。你知道可能出了什么问题吗？ - Nedim

好的，我知道了。问题是我已经包含了一个来自我购买的模板的dropzone.js文件，所以我只需要保留一个即可。 - Nedim

Answer 5

<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>

- Chung Nguyễn Trần

Answer 6

在网上搜索并尝试了几个解决方案后，我找到了解决此问题的最佳方案之一。

HTML

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

JavaScript

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

- George John

---

请注意：不要将该行代码放在jQuery函数中，否则它将没有效果。必须将该行代码放在所有其他操作之前运行。 - Zhang Buzz

并且不要将autoDiscover设置为false。 - Zhang Buzz

Answer 7

使用 Angular 时，这个解决方案对我没有起作用：

Dropzone.autoDiscover = false;

如果我不想编辑dropzone.js文件，唯一的方法就是这样才能让它与Angular配合使用：

@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);

- Elias

Answer 8

这是我的不太正式的解决方法。它基本上检查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({
       ...
       ...
    });

更新：建议找出为什么dropzone会被初始化两次。修复这个问题才是正确的方法，而本答案只是一种技术上存在债务的解决方法。

- Taku

Answer 9

我通过编辑dropzone.js来解决了这个问题。只需转到dropzone.js并替换即可。

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

使用

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

这个解决方案最初由 Haskaalo 发现，发布在 github issues 上。

- Jacky Supit

---

当你的同事更新了库文件后，你的应用程序神秘地出现了故障。 - Dem Pilafian

Answer 10

前往 dropzone.js 并将 if(n.element.dropzone) throw new Error("Dropzone already attached."; 替换为 if(n.element.dropzone) return this.element.dropzone;

- Renso Vasquez Quiroz