Skip to content


Subversion checkout URL

You can clone with
Download ZIP

Dragging files into page

hugoruscitti edited this page · 7 revisions
Clone this wiki locally

Following content requires node-webkit >= v0.2.5

node-webkit allows directly dragging files into page, developers can use it the same way as HTML5 specifies. The bonus is a path field is provided in File object so you can use fs module to directly operate files dragged into page.

An example is:

#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
<div id="holder"></div>
// prevent default behavior from changing page on dropped file
window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };

var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragleave = function () { this.className = ''; return false; };
holder.ondrop = function (e) {

  for (var i = 0; i < e.dataTransfer.files.length; ++i) {
  return false;

And the standard HTML5 way of reading files is also supported too:

holder.ondrop = function (e) {

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {

  return false;

If you're using jQuery to bind your drag / drop events, keep in mind that the event object passed back to your handlers is a jQuery event object, not the original HTML5 event object. Therefore, when you need to access the dataTransfer object, you have to use the e.originalEvent.dataTransfer field.

Something went wrong with that request. Please try again.