dropzone-meteor howto 화재 이벤트

Question

저는 Meteor를 처음 접했고 그것에 대해 배우고 싶습니다. 따라서 나는 meteor-dropzone을 통해 이미지를 업로드 할 수있는 페이지를 만들고 싶습니다.

업로드가 meteor-uploads과 작동합니다.

지금 나는 dropzone에서 'addedfile'또는 'drop'과 같은 이벤트를 가져 와서 새로운 기능을 수행하려고합니다.

HTML 페이지 PROFILE2 : PROFILE2의 JS 파일에서

<template name="profile2">  
    <div class="ibox-content">         
     {{> dropzone url='http://localhost:3000/uploads' maxFilesize=5 addRemoveLinks=true acceptedFiles='image/*,jpg,jpeg,png' id='dropzoneDiv'}} 
    </div> 
</template name="profile2"> 

내가이 쓴 :

Template.dropzone.events({ 
    'addedfile #dropzoneDiv': function(e, template){ 
     e.preventDefault(); 
     console.log("Hello"); 
    } 
}); 

을하지만 난 CONSOLE.LOG 출력에 뭔가를 볼 수 없습니다.

나는 뭔가 잘못하고 있다고 확신합니다. 그러나 나는 문제 또는 잘못된 이해가 어디에 있는지 나는 모른다. 누군가 나를 도와주세요.

감사합니다. 마이클

Answer 1

시도하고 오류가 발생한 후. 내가 왜 지금하지만 일반 유성 이벤트 버전으로 너무 다른 작동하고, 완전히 이해하지 않기 때문에이 솔루션은. 어쩌면 누군가가. 나에게 그것을 설명 할 수 발견했다.

그런

Dropzone.options.dropzoneDiv = { 
    init: function() { 
     this.on("addedfile", function(file) { alert("Added file."); }); 
    } 
}; 

템플릿 :...

<!-- Page heading --> 
{{> pageHeading title='File upload' category='Forms' }} 

<div class="wrapper wrapper-content animated fadeIn"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="ibox float-e-margins"> 
       <div class="ibox-title"> 
        <h5>Dropzone Area</h5> 
        {{>iboxTools}} 
       </div> 
       <div class="ibox-content"> 

        <!-- For more info about dropzone plugin see this: https://github.com/devonbarrett/meteor-dropzone/ --> 
        {{> dropzone url='/uploads' id='dropzoneDiv'}} 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 
</template> 

Answer 2

는 dropped 이벤트를보십시오 :

'dropped #dropzoneDiv' (e, template) => { 
    e.preventDefault(); 
    console.log(e.originalEvent.dataTransfer.files); // this will contain the list of files that were dropped 
} 

Answer 3

내 전체 템플릿 코드 :

<template name="profil2"> 

<!-- Page heading --> 
{{> pageHeading title='File upload' category='Forms' }} 

<div class="wrapper wrapper-content animated fadeIn"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="ibox float-e-margins"> 
       <div class="ibox-title"> 
        <h5>Dropzone Area</h5> 
        {{>iboxTools}} 
       </div> 
       <div class="ibox-content"> 

        <!-- For more info about dropzone plugin see this: https://github.com/devonbarrett/meteor-dropzone/ --> 
        {{> dropzone url='/uploads' id='dropzoneDiv'}} 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 
</template> 

내 complete 이벤트 잡기 코드 :

Template.profil2.events({ 
    'dropped #dropzoneDiv': function(e,template){ 
     e.preventDefault(); 
     console.log("hurra"); 
     console.log(e.originalEvent.dataTransfer.files); // this will contain the list of files that were dropped 
    } 
}); 

의 alle 그 내가 가지고있는 코드입니다. Dropzone은 업로드 파일을 서버에 저장하는 중입니다. 그래서 순간 나는 이벤트가 작동하지 않는 이유를 모른다. 하지만 초보자 잘못이라고 확신합니다. :(