CODEWITHSUNDEEP
meteordropzone.js
Michael
Michael

Reputation: 31

dropzone-meteor howto fire events

i'm new to Meteor and and i want to learn something about it. therefore i want to build a page were i can upload images via meteor-dropzone.

the upload is working with meteor-uploads.

now i want to get events, like 'addedfile' or 'drop' from the dropzone to fire some new functions.

HTML Page Profile2:

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

In The JS File for Profile2 i wrote this:

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

But i don't see something in the console.log output.

I'm sure i'm doing something wrong. But i have no i idea where the problem or the wrong understanding is. Can somebody help me please.

Thanks. Michael

Upvotes: 0

Views: 303

Answers (2)

Michael
Michael

Reputation: 31

after try and error. i found the solution. Maybe someone can explain it to me. because i don't understand it completely, why it's working now but so different to the normal Meteor event version. 

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

The Template like that: 

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

Upvotes: 1

Michel Floyd
Michel Floyd

Reputation: 20227

Try the dropped event:

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

Upvotes: 0

Related Questions