web-dev-qa-db-ja.com

この「Dropzoneは既に添付されています」エラーを修正するにはどうすればよいですか？

私はこのサンプルを持っています：

リンク

私はこのフォームを作成することができましたが、残念ながらエラーが発生するため機能しません。

Dropzone already attached.

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

CODE 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;を設定しましたが、残念ながらまだ動作しません。

この問題の原因を教えてください。

javascriptjqueryhtmldropzone.js
33
Marius

どちらかを使用する必要があります

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

または

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

両方ではありません。基本的には、同じことを2回呼び出しています。

14
drys

以下のコードをグローバルに定義すると役立ちます。

Dropzone.autoDiscover = false;
130
Syed

このエラーは、要素に既にクラスdropzoneがある場合にも発生する可能性があります。

ただし、これが削除されると、何らかの理由でDropzoneの開始後にデフォルトスタイルが適用されなくなります。私の唯一の回避策は、その要素のカスタムスタイルを作成することです。

7
inmyth
<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
Chung Nguyễn Trần

ネット上でいくつかのソリューションを検索して試した後、ここでこの問題を解決するための最良のソリューションの1つを得ました。

HTML

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

JavaScript

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

これは私のハック的な回避策です。基本的に、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({
       ...
       ...
    });

UPDATE：ドロップゾーンが2回開始される理由を理解することをお勧めします。それを修正するのが正しい方法であり、この答えはtechnically-debtfulの回避策にすぎません。

3
tsuz

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

2
Jacky Supit

Dropzoneのすべてのインスタンスについて、ID「myDrop」を一意の値と連結できます。

例：

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

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

場合によっては、同じID dropzoneを持つ2つの要素htmlがあるためです。

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

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