Modal内のDropzone.jsが機能しません。

Question

ファイルをサーバーにアップロードするためにdropzone.jsを使用しています。私はjsとcssファイルを含み、 "ドラッグゾーン"はボタンのクリックで開くモーダルウィンドウ内にあります（モーダルはここでは関係のない要素が多く含まれています）

私が直面している問題は、モーダルダイアログの中で、 "ファイルの追加"セクションがトリガされません。それをクリックしても何も起こらず、ファイルをドラッグアンドドロップすることもできません。

別のスレッドでも同様の問題が発生しましたが、そこで提供されている解決策が私のために機能しませんでした（here：Using Dropzone.js inside Bootstrap modal）。 私は運がない日の答えを探していました。どんなアイディアも大歓迎です。

これは私のコード

CSHTMLです：

[...] 
    <div class="W100pc"> 
     <div class="FormUnit W045pc AdjustedWidth"> 
      <div id="DropzoneElement" class="dropzone"> 
       <div class="dz-message">Add file here</div> 
      </div> 
     </div> 
    </div> 
[...] 

JS：あなたの助けを

[...] 
    $(document).ready(function() { 

     Dropzone.autoDiscover = false; 
     //Simple Dropzonejs 
     $("#DropzoneElement").dropzone({ 
      maxFilesize: 100, 
      url: window.doSomethingHere, 
      addRemoveLinks: true, 
      success: function(file, response) { 
       var imgName = response; 
       file.previewElement.classList.add("dz-success"); 
       console.log("Successfully uploaded :" + imgName); 
      }, 
      error: function(file, response) { 
       file.previewElement.classList.add("dz-error"); 
      } 
     }); 
    } 
[...] 

感謝。

Answer 1

モーダルがユーザーに表示されたときに、このイベントが発生するshown.bs.modalイベントを購読する必要があります。このイベントでDropzoneを初期化します。

$('#myModal').on('shown.bs.modal', function (e) { 
    // Initialize Dropzone 
});