Question

hello i am trying to drag and drop files into my filesystem using chrome, but i get the following error in the console:

var dnd = new DnDFileController('body', function(files, e) {
    var items = e.dataTransfer.items;
    for (var i = 0, item; item = items[i]; ++i) {
      traverseFileTree(item.webkitGetAsEntry());
**Uncaught TypeError: Object #<DataTransferItem> has no method 'webkitGetAsEntry'**
    }
  });

i also tried to add the method in the loop like this:

for (var i = 0, item; item = items[i].webkitGetAsEntry();; ++i) {
      traverseFileTree(item);
    }

the error is like this:

Uncaught TypeError: Object #<DataTransferItem> has no method 'webkitGetAsEntry' app.js:513
(anonymous function) app.js:513
DnDFileController.drop dnd.js:27

the DNDFileController.drop code is the following:

this.drop = function(e) {
    e.stopPropagation();
    e.preventDefault();

    el_.classList.remove('dropping');

    onDropCallback(e.dataTransfer.files, e);
  };

but i get the same error, any ideas? thanks.

Answer 1

Presumably you’re using this DnDFileController – http://html5-demos.appspot.com/static/filesystem/filer.js/demos/js/dnd.js . So first off, I’ve got your code to a testable state as:

function DnDFileController(selector, onDropCallback) {
  var el_ = document.querySelector(selector);

  this.dragenter = function(e) {
    e.stopPropagation();
    e.preventDefault();
    el_.classList.add('dropping');
  };

  this.dragover = function(e) {
    e.stopPropagation();
    e.preventDefault();
  };

  this.dragleave = function(e) {
    e.stopPropagation();
    e.preventDefault();
    //el_.classList.remove('dropping');
  };

  this.drop = function(e) {
    e.stopPropagation();
    e.preventDefault();

    el_.classList.remove('dropping');
    onDropCallback(e.dataTransfer.files, e);
  };

  el_.addEventListener('dragenter', this.dragenter, false);
  el_.addEventListener('dragover', this.dragover, false);
  el_.addEventListener('dragleave', this.dragleave, false);
  el_.addEventListener('drop', this.drop, false);
};

var dnd = new DnDFileController('body', function(files, e) {
    var items = e.dataTransfer.items;
    for (var i = 0, item; item = items[i]; ++i) {
      if (item.kind == 'file') {
          debugger
          console.log(item.webkitGetAsEntry());
      }
    }
  });

Now, checking the state of item in the debugger, in Chrome 20.0.1132.27 beta, it is only exposing those properties and methods which are in the current spec[1] – ie, item.kind, item.type, item.getAsString(callback), and item.getAsFile(). DataTransferItem.webkitGetAsEntry() is not exposed. As far as I can tell[2], Chrome wasn’t supposed to be exposing their proposed webkitGetAsEntry yet, and after having it turned on for just one week[3], they turned its switch back off. So at the moment, it isn’t enabled unless you use whatever flags to enable it[4].

Once you enable it, it also looks like its intended, like getAsString, to be used with a callback, not just as a getter. See example in [5]:

    var items = e.dataTransfer.items;
    for (var i = 0; i < items.length; ++i) {
      if (items[i].kind == 'file') {
          items[i].webkitGetAsEntry(function(entry) {
          displayEntry(entry.name + (entry.isDirectory ? ' [dir]' : ''));
          ...
        });
      }
    }

Note that they also are wrapping it in a protective check that file[i] is actually a file; this is in my test code above, but missing in your code.

But if you’re just trying to access the files, is there a reason you want to use this experimental method? It’s a pretty simple loop to use a FileReader to read the file, then Blob-ify it, then store it in a local FileSystem… and all those methods are far less experimental and new.

Refs:

[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransferitem-interface

[2] http://trac.webkit.org/changeset/118507

[3] http://code.google.com/p/chromium/issues/detail?id=129702

[4] https://bugs.webkit.org/show_bug.cgi?id=87457

[5] http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Apr/0078.html

======================================================

UPDATE 7/26/2012:

This method has now had the flags requirement removed, and is available for general use with the release of Chrome 21 on 7/23/12. However, for the use case described here, the above is much simpler to implement, and better fits the needs, as there was no need to also be able to read entire directories at the same time.