File drag-and-drop not working with knockout.js - html

Question

I'm trying to achieve a file drag-and-drop with knockout.js.
This is my html:
<div type="text" id="filedrag" class="" data-bind="event: {drop: function (data,e) { $root.insertFile(e,data);} }">
<div id="messages"></div>
</div>
And this my JS:
self.insertFile = function(e, data) {
console.log("insertfile called");
var files = e.target.files || e.dataTransfer.files;
console.log(files);
};
I copied the code from a jsfiddle. I don't quite see the difference between that one and mine. What am I doing wrong?

Answer 1

This is because you need to have a dragover event where you cancel the default behaviour.
The cancellation of the dragover event is needed to allow drop.
See https://developer.mozilla.org/en-US/docs/Web/Events/dragover.
I have created a fiddle with your code, updated with an dragover event where you cancel default behaviour.
Fiddle: http://jsfiddle.net/JBJd2/10/
HTML:
<div type="text" id="filedrag" class="drop_zone" data-bind="event: {
drop: function (data,e) { $root.insertFile(e,data);},
dragover: function(data, e){ $root.dragover(e);}
}">
<div id="messages"></div>
</div>
JS:
self.insertFile = function(e, data) {
e.preventDefault();
console.log("insertfile called");
var files = e.target.files || e.dataTransfer.files;
console.log(files);
};
self.dragover = function(e){
e.preventDefault();
}