DataTransferItem: webkitGetAsEntry() Methode

Syntax

webkitGetAsEntry()

Parameter

Keine.

Rückgabewert

Ein auf FileSystemEntry basierendes Objekt, das das fallengelassene Element beschreibt. Dies wird entweder FileSystemFileEntry oder FileSystemDirectoryEntry sein. Die Methode bricht ab und gibt null zurück, wenn das fallengelassene Element keine Datei ist oder wenn das DataTransferItem-Objekt nicht im Lese- oder Lese/Schreibmodus ist.

Beispiele

In diesem Beispiel wird eine Ablegezone erstellt, die auf das drop-Ereignis reagiert, indem sie die abgelegten Dateien und Verzeichnisse durchscannt und ein hierarchisches Verzeichnislisting ausgibt.

HTML

Das HTML etabliert die Ablegezone selbst, die ein <div> Element mit der ID "dropzone" ist, sowie ein ungeordnetes Listenelement mit der 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

Die in diesem Beispiel verwendeten Styles werden hier gezeigt.

#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

Schauen wir uns zunächst die rekursive scanFiles() Funktion an. Diese Funktion nimmt als Eingabe ein FileSystemEntry, welches einen Eintrag im Dateisystem repräsentiert, der gescannt und verarbeitet werden soll (der item-Parameter), und ein Element, in welches die Liste der Inhalte eingefügt werden soll (der container-Parameter).

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() beginnt mit der Erstellung eines neuen <li> Elements, um das gescannte Element darzustellen, fügt den Namen des Elements als Textinhalt ein und hängt es an den Container an. Der Container ist in diesem Beispiel immer ein Listenelement, wie Sie gleich sehen werden.

Sobald das aktuelle Element in der Liste ist, wird die isDirectory Eigenschaft des Elements geprüft. Wenn das Element ein Verzeichnis ist, müssen wir in dieses Verzeichnis rekursieren. Der erste Schritt besteht darin, einen FileSystemDirectoryReader zu erstellen, um das Abrufen der Verzeichnisinhalte zu handhaben. Das wird durch Aufrufen der createReader() Methode des Elements erreicht. Dann wird ein neues <ul> erstellt und zur Elternliste hinzugefügt; dieses wird die Verzeichniseinträge auf der nächsten Hierarchieebene enthalten.

Danach wird directoryReader.readEntries() aufgerufen, um alle Einträge im Verzeichnis zu lesen. Diese werden jeweils in einem rekursiven Aufruf von scanFiles() verarbeitet. Alle davon, die Dateien sind, werden in die Liste eingefügt; alle, die Verzeichnisse sind, werden in die Liste eingefügt und eine neue Ebene der Listenhierarchie wird darunter hinzugefügt und so weiter.

Dann kommen die Ereignis-Handler. Zuerst verhindern wir, dass das dragover-Ereignis vom Standardhandler verarbeitet wird, damit unsere Ablegezone das Ablegen empfangen kann:

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

Der Ereignishandler, der alles in Gang setzt, ist natürlich der Handler für das drop-Ereignis:

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

Dieser holt die Liste der DataTransferItem-Objekte ab, die die abgelegten Elemente repräsentieren, aus event.dataTransfer.items. Dann rufen wir Event.preventDefault() auf, um zu verhindern, dass das Ereignis nach unserer Verarbeitung weiter behandelt wird.

Jetzt ist es an der Zeit, mit der Erstellung der Liste zu beginnen. Zuerst wird die Liste geleert, indem listing.textContent auf leer gesetzt wird. Das hinterlässt uns ein leeres <ul>, in das wir Verzeichniseinträge einfügen können.

Dann iterieren wir über die Elemente in der Liste der abgelegten Elemente. Für jedes rufen wir seine webkitGetAsEntry() Methode auf, um ein FileSystemEntry zu erhalten, das die Datei repräsentiert. Wenn das erfolgreich ist, rufen wir scanFiles() auf, um das Element zu verarbeiten - entweder indem wir es zur Liste hinzufügen, wenn es nur eine Datei ist, oder indem wir es hinzufügen und in es hineinlaufen, wenn es ein Verzeichnis ist.

Ergebnis

Sie können sehen, wie das funktioniert, indem Sie es unten ausprobieren. Suchen Sie einige Dateien und Verzeichnisse und ziehen Sie sie hinein, und schauen Sie sich die resultierende Ausgabe an.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• File and Directory Entries API
• DataTransferItem
• FileSystemEntry, FileSystemFileEntry und FileSystemDirectoryEntry
• Ereignisse: dragover und drop