DataTransferItem: webkitGetAsEntry() method

If the item described by theDataTransferItem is a file,webkitGetAsEntry() returns aFileSystemFileEntry orFileSystemDirectoryEntry representing it. If the item isn't a file,null is returned.

Note:This function is implemented aswebkitGetAsEntry() in non-WebKit browsers including Firefox at this time; it may be renamed togetAsEntry() in the future, so you should code defensively, looking for both.

Syntax

webkitGetAsEntry()

Parameters

None.

Return value

AFileSystemEntry-based object describing the dropped item.This will be eitherFileSystemFileEntry orFileSystemDirectoryEntry.The method aborts and returnsnull if the dropped item isn't a file, or if theDataTransferItem object is not in read or read/write mode.

Examples

In this example, a drop zone is created, which responds to thedrop eventby scanning through the dropped files and directories, outputting a hierarchicaldirectory listing.

HTML

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".

html

<p>Drag files and/or directories to the box below!</p><div>  <div>Drop Files Here</div></div><h2>Directory tree:</h2><ul></ul>

CSS

The styles used by the example are shown here.

css

#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

First, let's look at the recursivescanFiles() function.This function takes as input aFileSystemEntry representing an entry in the file system to be scanned and processed (theitem parameter), and an element into which to insert the list of contents (thecontainer parameter).

Note:To read all files in a directory,readEntries needs to be called repeatedly until it returns an empty array.In Chromium-based browsers, the following example will only return a max of 100 entries.

let dropzone = document.getElementById("dropzone");let listing = document.getElementById("listing");function scanFiles(item, container) {  let elem = document.createElement("li");  elem.textContent = item.name;  container.appendChild(elem);  if (item.isDirectory) {    let directoryReader = item.createReader();    let directoryContainer = document.createElement("ul");    container.appendChild(directoryContainer);    directoryReader.readEntries((entries) => {      entries.forEach((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'sisDirectory property is checked.If the item is a directory, we need to recurse into that directory.The first step is to create aFileSystemDirectoryReader to handle fetching the directory's contents.That's done by calling the item'screateReader() 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 toscanFiles() to process them.Any of them which are files are 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 thedragover event from being handled by the default handler, so that our drop zone can receive the drop:

dropzone.addEventListener("dragover", (event) => {  event.preventDefault();});

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

dropzone.addEventListener("drop", (event) => {  let items = event.dataTransfer.items;  event.preventDefault();  listing.textContent = "";  for (const item of items) {    const entry = item.webkitGetAsEntry();    if (entry) {      scanFiles(entry, listing);    }  }});

This fetches the list ofDataTransferItem objects representing the items dropped fromevent.dataTransfer.items.Then we callEvent.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 settinglisting.textContent 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 itswebkitGetAsEntry() method to obtain aFileSystemEntry representing the file.If that's successful, we callscanFiles() 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.