dropzone-meteor 如何触发事件

Question

我是 Meteor 的新手，我想了解它。因此我想建立一个页面，我可以通过 meteor-dropzone.

上传图片

上传正在使用 meteor-uploads。

现在我想从 dropzone 获取事件，例如 'addedfile' 或 'drop' 以触发一些新功能。

HTML 页面简介 2:

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

在 Profile2 的 JS 文件中，我这样写：

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

但我在 console.log 输出中没有看到任何内容。

我确定我做错了什么。但是我不知道问题在哪里或理解错误。有人可以帮帮我吗

谢谢。迈克尔

Answer 1

尝试 dropped 活动：

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

Answer 2

经过反复尝试。我找到了解决方案。也许有人可以向我解释。因为我不完全理解它，为什么它现在可以工作但与正常的 Meteor 事件版本如此不同。

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>

dropzone-meteor 如何触发事件

dropzone-meteor howto fire events

meteor

dropzone.js