DataTransferItem: метод webkitGetAsEntry()

Если элемент, описанный DataTransferItem, является файлом, webkitGetAsEntry() возвращает FileSystemFileEntry или FileSystemDirectoryEntry, представляющие его. Если элемент не является файлом, null.

Нет.

Объект на основе FileSystemEntry, описывающий элемент, переданный с помощью перетаскивания. Это будет либо FileSystemFileEntry, либо FileSystemDirectoryEntry. Метод прерывается и возвращает null, если переданный элемент не является файлом или если объект DataTransferItem не находится в режиме чтения или чтения/записи.

В этом примере создана область перетаскивания, которая реагирует на событие drop, просматривая перетащенные файлы и каталоги, выводит иерархический список каталогов.

HTML устанавливает саму область перетаскивания, которая является элементом <div> с идентификатором "dropzone", и элементом неупорядоченного списка с идентификатором "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>

Здесь показаны используемые в примере стили.

#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;
}

Сначала рассмотрим рекурсивную функцию scanFiles(). Эта функция принимает на вход FileSystemEntry, представляющий собой элемент в файловой системе для сканирования и обработки (параметр item), и элемент, в который следует вставить список содержимого (параметр container).

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() начинает с создания нового элемента <li> для представления сканируемого элемента, вставляет имя элемента в него в качестве текстового содержимого и добавляет его в контейнер. В данном примере контейнер всегда является элементом списка.

После того, как текущий элемент добавлен в список, проверяется свойство isDirectory элемента. Если элемент является каталогом, необходимо рекурсивно войти в этот каталог. Первый шаг — создание FileSystemDirectoryReader для обработки извлечения содержимого каталога. Это делается путём вызова метода createReader() элемента. Затем создаётся и добавляется новый элемент <ul> в родительский список; он будет содержать содержимое каталога на следующем уровне иерархии списка.

После этого вызывается directoryReader.readEntries() для чтения всех элементов в каталоге. Каждый из них, в свою очередь, передаётся в рекурсивный вызов scanFiles() для обработки. Любые из них, которые являются файлами, добавляются в список; любые, которые являются каталогами, добавляются в список, и добавляется новый уровень иерархии списка и так далее.

Затем идут обработчики событий. Во-первых, мы предотвращаем обработку события dragover стандартным обработчиком, чтобы наша область перетаскивания могла принять перетаскивание:

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

Обработчик события, который запускает всё, конечно же, — это обработчик события drop:

dropzone.addEventListener(
  "drop",
  (event) => {
    let items = event.dataTransfer.items;

    event.preventDefault();
    listing.textContent = "";

    for (let i = 0; i < items.length; i++) {
      let item = items[i].webkitGetAsEntry();

      if (item) {
        scanFiles(item, listing);
      }
    }
  },
  false,
);

Это извлекает список объектов DataTransferItem, представляющих элементы, перетащенные из event.dataTransfer.items. Затем мы вызываем Event.preventDefault(), чтобы предотвратить дальнейшую обработку события после завершения.

Теперь пришло время начать построение списка. Сначала список очищается путём установки listing.textContent в пустое значение. Это оставляет нам пустой <ul> для начала вставки элементов каталога.

Затем мы перебираем элементы в списке перетащенных элементов. Для каждого из них мы вызываем его метод webkitGetAsEntry() для получения FileSystemEntry, представляющего файл. Если это удаётся, мы вызываем scanFiles() для обработки элемента — либо путём добавления его в список, если это просто файл, либо путём добавления его и переходом в него, если это каталог.

Вы можете увидеть, как это работает, попробовав это ниже. Найдите несколько файлов и каталогов и перетащите их, и посмотрите на результат.

• API элементов файлов и каталогов
• Введение в API элементов файлов и каталогов
• DataTransferItem
• FileSystemEntry, FileSystemFileEntry и FileSystemDirectoryEntry
• События: dragover и drop