Dragging files into page

Brandon Kirsch edited this page Feb 10, 2016 · 15 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:

<!DOCTYPE html>
      #holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
      #holder.hover { border: 10px dashed #333; }

      //Same as $(document).ready();
      function ready(fn) {
        if (document.readyState != 'loading'){
        } else {
          document.addEventListener('DOMContentLoaded', fn);

      //When the page has loaded, run this code
        // prevent default behavior from changing page on dropped file
        window.ondragover = function(e) { e.preventDefault(); return false };
        // NOTE: ondrop events WILL NOT WORK if you do not "preventDefault" in the ondragover event!!
        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;
    <div id="holder"></div>

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.