この「Dropzone already attached」エラーを修正するにはどうすればよいですか？

Question

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

link

私はエラーを取得するので、私はこのフォームを作成することが、残念ながら、それは動作しません管理。

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;を設定するが、残念ながら、まだ機能していません。

この問題の原因は何ですか？

Answer 1

あなたは

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

または

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

のいずれか一方を使用する必要があります。基本的にあなたがやっていることは、同じことを2回呼び出すことです。

Answer 2

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

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

Answer 3

は、世界的に支援します。

Dropzone.autoDiscover = false; 

Answer 4

これは私のハック回避策です。基本的には、dropzoneがDOMとしてロードされているかどうかをチェックし、ドロップされていない場合はDOMzoneを作成します。

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：ドロップゾーンが二回開始された理由を把握することが示唆されます。修正は正しい方法です。この回答は技術的に負債のある回避策に過ぎません。

Answer 5

ネット上でいくつかのソリューションを検索して試したところ、この問題を解決するための最良のソリューションが得られました。あなたは同じid dropzoneで二回要素のhtmlを持っているので、

HTML

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

JavaScriptが

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

Answer 6

が時々あります。

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

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

Answer 7

この問題は、dropzone.jsを編集して修正しました。ちょうどdropzoneに行く。githubのに掲載のjsと、このソリューションは、もともとHaskaaloによって発見された

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

で

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

を交換するには、[OK]を