DataTransferItem.webkitGetAsEntry()

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

If the item described by the DataTransferItem is a file, webkitGetAsEntry() returns a FileSystemFileEntry or FileSystemDirectoryEntry representing it. If the item isn't a file, null is returned.

This function is implemented as webkitGetAsEntry() in non-WebKit browsers including Firefox at this time; it may be renamed to simply getAsEntry() in the future, so you should code defensively, looking for both.

Syntax

DataTransferItem.webkitGetAsEntry();

Parameters

None.

Return value

A FileSystemEntry-based object describing the dropped item. This will be either FileSystemFileEntry or FileSystemDirectoryEntry.

Example

In this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing.

HTML content

The HTML establishes the drop zone itself, which is a <div> element with the ID "dropzone", and an unordered list element with the ID "listing".

<p>Drag files and/or directories to the box below!</p>
<div id="dropzone">
  <div id="boxtitle">
    Drop Files Here
  </div>
</div>
<h2>Directory tree:</h2>
<ul id="listing">
</ul>

CSS content

The styles used by the example are shown here.

#dropzone {
  text-align: center;
  width: 300px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 4px dashed red;
  border-radius: 10px;
}
#boxtitle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: black;
  font: bold 2em "Arial", sans-serif;
  width: 300px;
  height: 100px;
}
body {
  font: 14px "Arial", sans-serif;
}

JavaScript content

First, let's look at the recursive scanFiles() function. This function takes as input a FileSystemEntry representing an entry in the file system to be scanned and processed (the item parameter), and an element into which to insert the list of contents (the container parameter).

let dropzone = document.getElementById("dropzone");
let listing = document.getElementById("listing");
function scanFiles(item, container) {
  let elem = document.createElement("li");
  elem.innerHTML = item.name;
  container.appendChild(elem);
 if (item.isDirectory) {
    let directoryReader = item.createReader();
    let directoryContainer = document.createElement("ul");
    container.appendChild(directoryContainer);
    directoryReader.readEntries(function(entries) {
        entries.forEach(function(entry) {
          scanFiles(entry, directoryContainer);
      });
    });
  }
}

scanFiles() begins by creating a new <li> element to represent the item being scanned, inserts the name of the item into it as its text content, and then appends it to the container. The container is always a list element in this example, as you'll see shortly.

Once the current item is in the list, the item's isDirectory property is checked. If the item is a directory, we need to recurse into that directory. The first step is to create a FileSystemDirectoryReader to handle fetching the directory's contents. That's done by calling the item's createReader() method. Then a new <ul> is created and appended to the parent list; this will contain the directory's contents in the next level down in the list's hierarchy.

After that, directoryReader.readEntries() is called to read in all the entries in the directory. These are each, in turn, passed into a recursive call to scanFiles() to process them. Any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is added below, and so forth.

Then come the event handlers. First, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop:

dropzone.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

The event handler that kicks everything off, of course, is the handler for the drop event:

dropzone.addEventListener("drop", function(event) {
  let items = event.dataTransfer.items;
  event.preventDefault();
  listing.innerHTML = "";
  for (let i=0; i<items.length; i++) {
    let item = items[i].webkitGetAsEntry();
    if (item) {
        scanFiles(item, listing);
    }
  }
}, false);

This fetches the list of DataTransferItem objects representing the items dropped from event.dataTransfer.items. Then we call Event.preventDefault() to prevent the event from being handled further after we're done.

Now it's time to start building the list. First, the list is emptied by setting listing.innerHTML to be empty. That leaves us with an empty ul to begin inserting directory entries into.

Then we iterate over the items in the list of dropped items. For each one, we call its webkitGetAsEntry() method to obtain a FileSystemEntry representing the file. If that's successful, we call scanFiles() to process the item—either by adding it to the list if it's just a file or by adding it and walking down into it if it's a directory.

Result

You can see how this works by trying it out below. Find some files and directories and drag them in, and take a look at the resulting output.

Specifications

Specification Status Comment
File and Directory Entries API
The definition of 'webkitGetAsEntry()' in that specification.
Editor's Draft Initial specification.

This API has no official W3C or WHATWG specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Microsoft Edge Opera Safari (WebKit)
Basic support 13 webkit 50 (50) No support (Yes) No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 0.16webkit 50.0 (50) No support No support No support

See also

Document Tags and Contributors

 Contributors to this page: Sheppy
 Last updated by: Sheppy,