FileSystemHandle.kind — Eigenschaft · JavaScript-Referenz

Signatur

FileSystemHandle.kind

Beschreibung

Die Eigenschaft kind gibt den Typ des Eintrags zurück, auf den ein FileSystemHandle verweist. Der Wert ist immer einer von zwei Strings: "file" für einen FileSystemFileHandle oder "directory" für einen FileSystemDirectoryHandle.

Gebraucht wird sie vor allem beim Durchlaufen von Verzeichnissen: Iteriert man mit for await über directoryHandle.values() oder entries(), bekommt man Handles beider Typen gemischt zurück. Über kind entscheidet man, ob man getFile() aufruft oder rekursiv in ein Unterverzeichnis absteigt. Das gilt genauso für Handles aus Drag-and-drop (DataTransferItem.getAsFileSystemHandle()), bei denen vorher nicht feststeht, ob der Nutzer eine Datei oder einen Ordner abgelegt hat.

Weil kind ein String ist, funktioniert die Prüfung auch über Realm-Grenzen hinweg, etwa bei Handles, die per postMessage an einen Worker übergeben wurden. Eine instanceof-Prüfung kann dort scheitern. Die Eigenschaft ist schreibgeschützt: Zuweisungen werden ignoriert und lösen im Strict Mode keinen Fehler aus.

Rückgabewert

Typ

"file" | "directory"

Beschreibung

"file", wenn das Handle ein FileSystemFileHandle ist, sonst "directory" für einen FileSystemDirectoryHandle.

Beispiele

Verzeichnisinhalt nach Typ unterscheiden

// Nur Chromium-Browser: Ordnerauswahl-Dialog (muss durch eine Nutzeraktion ausgelöst werden)
document.querySelector('#open').addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const handle of dirHandle.values()) {
    const icon = handle.kind === 'directory' ? '📁' : '📄';
    console.log(`${icon} ${handle.name}`);
  }
});

📁 bilder 📄 notizen.txt 📄 index.html

Rekursive Größenberechnung im Origin Private File System

const berechneGroesse = async (dirHandle) => {
  let summe = 0;
  for await (const handle of dirHandle.values()) {
    if (handle.kind === 'file') {
      const file = await handle.getFile();
      summe += file.size;
    } else {
      summe += await berechneGroesse(handle);
    }
  }
  return summe;
};

const root = await navigator.storage.getDirectory();
const datei = await root.getFileHandle('demo.txt', { create: true });
const writable = await datei.createWritable();
await writable.write('Hallo Welt');
await writable.close();

console.log(`Belegt: ${await berechneGroesse(root)} Bytes`);

Belegt: 10 Bytes

Drag-and-drop: Datei oder Ordner?

const zone = document.querySelector('#dropzone');
zone.addEventListener('dragover', (e) => e.preventDefault());
zone.addEventListener('drop', async (e) => {
  e.preventDefault();
  for (const item of e.dataTransfer.items) {
    if (item.kind !== 'file') continue; // DataTransferItem.kind!
    const handle = await item.getAsFileSystemHandle();
    if (handle?.kind === 'directory') {
      console.log(`Ordner abgelegt: ${handle.name}`);
    } else if (handle) {
      const file = await handle.getFile();
      console.log(`Datei abgelegt: ${file.name} (${file.type})`);
    }
  }
});

Ordner abgelegt: projekt Datei abgelegt: foto.jpg (image/jpeg)

// Wichtig · Fallstricke

Nicht verwechseln: Auch DataTransferItem.kind gibt "file" oder "string" zurück. Das ist eine andere Eigenschaft, die für Ordner ebenfalls "file" liefert.
Um zu prüfen, ob zwei Handles auf denselben Eintrag verweisen, nimmt man isSameEntry(). Ein Vergleich von kind und name genügt dafür nicht.
Kompatibilität: FileSystemHandle mit kind gibt es in allen modernen Browsern über das Origin Private File System (navigator.storage.getDirectory()). showOpenFilePicker(), showDirectoryPicker() und getAsFileSystemHandle() gibt es nur in Chromium-basierten Browsern. Vor der Nutzung sollte man prüfen, ob die Funktion vorhanden ist ('showDirectoryPicker' in window).
Die API steht nur in sicheren Kontexten (HTTPS) zur Verfügung.
In TypeScript grenzt kind den Typ ein (discriminated union): Nach if (h.kind === 'file') ist h ein FileSystemFileHandle.

Siehe auch

FileSystemEntry.name FileSystemHandle.name FileSystem.name FileSystem.root FileSystemEntry.isFile