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

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

i'm trying accomplish file drag-and-drop knockout.js.

this html:

class="lang-html prettyprint-override"><div type="text" id="filedrag" class="" data-bind="event: {drop: function (data,e) { $root.insertfile(e,data);} }"> <div id="messages"></div> </div>

and js:

self.insertfile = function(e, data) { console.log("insertfile called"); var files = e.target.files || e.datatransfer.files; console.log(files); };

i copied code a jsfiddle. don't quite see difference between 1 , mine. doing wrong?

this because need have dragover event cancel default behaviour. cancellation of dragover event needed allow drop.

see https://developer.mozilla.org/en-us/docs/web/events/dragover.

i have created fiddle code, updated dragover event 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(); }

html5 knockout.js