모달 내 Dropzone.js가 작동하지 않습니다.

Question

파일을 서버에 업로드하는 데 dropzone.js를 사용하고 있습니다. js 및 css 파일이 포함되어 있고 "끌기 영역"은 버튼 클릭으로 열리는 모달 창 내에 있습니다 (모달에는 여기에없는 더 많은 요소가 포함되어 있습니다)

내가 직면 한 문제는 모달 대화 상자에서 "파일 추가"섹션이 실행되지 않습니다. 그것을 클릭 할 때 아무 일도 발생하지 않으며 파일을 끌어서 놓을 수 없습니다.

다른 스레드에서 비슷한 문제가 발생했으나 거기에 제공된 솔루션이 나에게 적합하지 않습니다 (here : Using Dropzone.js inside Bootstrap modal). 나는 운이없는 날에 대한 해답을 찾고 있었다. 어떤 아이디어라도 환영 할 것입니다.

[...] 
    <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"); 
      } 
     }); 
    } 
[...] 

감사

이

은

CSHTML 내 코드입니다.

Answer 1

모달이 사용자에게 표시 될 때이 이벤트가 발생하는 shown.bs.modal 이벤트에 가입해야합니다. 이 이벤트에서 Dropzone을 초기화하십시오.

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