如何解决此“Dropzone 已附加”错误？答案

【问题标题】：How can I fix this "Dropzone already attached" error?如何解决此“Dropzone 已附加”错误？
【发布时间】：2016-01-09 15:48:52
【问题描述】：

我有这个样本：

link

我设法创建了这个表单，但不幸的是它因为我出错而无法正常工作。

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;，但不幸的是仍然无法正常工作。

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

【问题讨论】：

标签： javascript jquery html dropzone.js

【解决方案1】：

转到 dropzone.js 并替换 if(n.element.dropzone) throw new Error("Dropzone already attach."; 用 if(n.element.dropzone) return this.element.dropzone;

【讨论】：

【解决方案2】：

在$(document).ready 之前添加Dropzone.autoDiscover = false，如下所示：

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

});

【讨论】：

我已在编辑中将其删除，但您的回答以“不要忘记”结尾。您的意思是在您的答案中添加更多内容吗？
应该是最佳答案

【解决方案3】：

当我使用 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);

【讨论】：

【解决方案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】：

您可以将您的 ID“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);

【讨论】：

【解决方案6】：

我通过编辑 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

【讨论】：

...然后当您的同事更新库时，您的应用程序神秘地中断了。

【解决方案7】：

这是我的 hackish 解决方法。它主要检查 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 启动两次的原因。解决这个问题是正确的方法，而这个答案只是一个技术上欠债的解决方法。

【讨论】：

【解决方案8】：

有时是因为你有两个元素 html 具有相同的 id dropzone。

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

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

【讨论】：

【解决方案9】：

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

HTML

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

JavaScript

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

【讨论】：

另外请注意：不要把该行放在jQuery函数中，否则不起作用。必须在所有其他操作之前运行该行。
并且不要将 autoDiscover 设置为 false。

【解决方案10】：

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

Dropzone.autoDiscover = false;

【讨论】：

感谢这个简单但有效的解决方案。我认为问题在于 Dropzone 插件，它会自动实例化所有 dropzone 实例。对于大多数插件，这通常不会发生，直到您自己实例化它。所以我们期望 Dropzone 也是如此。然后，当我们实例化 dropzone 时，相信它是唯一的实例化，我们实际上得到了两个，因为插件也会自动执行一个。这就是这行代码起作用的原因——通过关闭第一个实例化。
我收到此错误：“未捕获的错误：已附加 Dropzone。”
这才是真正的答案。没有它 dropzone 使用带有 .dropzone 类的标签。如果你想在这个类的元素上使用相同的样式和 dropzone，你需要设置这个，
请务必在文档加载之前运行此文件，否则 dropzone 的自动发现可能会击败您（@NikhilRao，我怀疑这一点就是你的情况）。
为我工作。我刚刚将它添加到我的$("#picture").dropzone({...}) 上方

【解决方案11】：

当元素已经有一个类 dropzone 时，也会发生此错误。

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

【讨论】：

我将 autoDiscover 设置为 false，并且我只有一个具有类 dropzone 的元素。你知道可能是什么问题吗？
好吧，我想通了。问题是我已经包含了 dropzone.js（来自我购买的模板），所以我只离开了一次。

【解决方案12】：

你应该使用任何一个

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

或

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

两者都不是。基本上你正在做的是两次调用同一个东西。

【讨论】：

@Syed 的回答很好！