Handling drop
event there’s no dataTransfer property. Why? Is this a bug or I’m using it incorrectly?
I recreated the issue with a small demo project starting from meteor create test_data_transfer
:
main.html is
<head>
<title>simple</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> testDataTransfer}}
</body>
<template name="testDataTransfer">
<div id="drop-zone">
Drop Files Over Here
</div>
</template>
and main.js is
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Template.testDataTransfer.events({
'dragover #drop-zone'(e, t) {
e.preventDefault();
},
'dragenter #drop-zone'(e, t) {
e.preventDefault();
},
'drop #drop-zone'(e, t) {
e.preventDefault();
console.log("File dropped ..." + (e.dataTransfer ? e.dataTransfer.files[0] : "No data transfer property"));
},
});
e.dataTransfer
is supposed to be defined when you drop a file over the div.
What’s wrong with my code?