Signatur
Beschreibung
Die schreibgeschützte Eigenschaft filesystem eines FileSystemEntry (und damit auch von FileSystemFileEntry und FileSystemDirectoryEntry) verweist auf das FileSystem-Objekt, in dem sich der Eintrag befindet. Über dieses Objekt kommt man an den Namen des Dateisystems (filesystem.name) und an das Wurzelverzeichnis (filesystem.root).
In der Praxis braucht man die Eigenschaft vor allem bei Drag-and-drop oder bei <input type="file" webkitdirectory>. Mit DataTransferItem.webkitGetAsEntry() erhält man Einträge, und über entry.filesystem.root lässt sich das virtuelle Wurzelverzeichnis der abgelegten Auswahl durchlaufen oder ein Eintrag über einen Pfad relativ zur Wurzel ansprechen.
Alle Einträge, die aus derselben Drag-and-drop-Aktion stammen, teilen sich in der Regel dasselbe FileSystem-Objekt. Deshalb kann man mit der Eigenschaft auch prüfen, ob zwei Einträge aus derselben Quelle kommen.
Rückgabewert
FileSystem-Objekt mit den Eigenschaften name (string) und root (FileSystemDirectoryEntry).Beispiele
Dateisystem eines per Drag-and-drop abgelegten Eintrags auslesen
const dropZone = document.querySelector('#drop-zone');
dropZone.addEventListener('dragover', (event) => event.preventDefault());
dropZone.addEventListener('drop', (event) => {
event.preventDefault();
for (const item of event.dataTransfer.items) {
const entry = item.webkitGetAsEntry();
if (!entry) continue;
const fs = entry.filesystem;
console.log(`Eintrag: ${entry.fullPath}`);
console.log(`Dateisystem: ${fs.name}`);
console.log(`Wurzel: ${fs.root.fullPath}`);
}
});Datei über Pfad relativ zur Wurzel des Dateisystems öffnen
const getFileFromRoot = (entry, path) =>
new Promise((resolve, reject) => {
entry.filesystem.root.getFile(path, {}, resolve, reject);
});
const readText = (fileEntry) =>
new Promise((resolve, reject) => {
fileEntry.file((file) => file.text().then(resolve, reject), reject);
});
document.querySelector('#drop-zone').addEventListener('drop', async (event) => {
event.preventDefault();
const entry = event.dataTransfer.items[0]?.webkitGetAsEntry();
if (!entry) return;
try {
const readme = await getFileFromRoot(entry, `${entry.fullPath}/README.md`);
console.log(await readText(readme));
} catch (err) {
console.warn('README.md nicht gefunden:', err.name);
}
});Prüfen, ob zwei Einträge aus derselben Quelle stammen
const sameSource = (a, b) => a.filesystem === b.filesystem;
document.querySelector('#drop-zone').addEventListener('drop', (event) => {
event.preventDefault();
const entries = [...event.dataTransfer.items]
.map((item) => item.webkitGetAsEntry())
.filter(Boolean);
if (entries.length >= 2) {
console.log('Gleiches Dateisystem:', sameSource(entries[0], entries[1]));
}
});// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
filesystemwird ignoriert (im Strict Mode kommt es zu einemTypeError). - Virtuelles Dateisystem:
filesystem.rootsteht nicht für das echte Wurzelverzeichnis der Festplatte. Es ist eine Sandbox, die nur die vom Nutzer abgelegten oder ausgewählten Dateien enthält. Echte Pfade des Betriebssystems bekommt man darüber nicht. - Der Name ist nicht fest:
filesystem.namewird vom Browser vergeben und ist je nach Implementierung verschieden. Man sollte sich nicht auf ein bestimmtes Format verlassen. - Zeitpunkt:
webkitGetAsEntry()muss direkt imdrop-Handler aufgerufen werden, also synchron. Danach ist dieDataTransferItemListnicht mehr gültig. - Kompatibilität: Die Eigenschaft wird in Chrome, Edge, Firefox und Safari unterstützt. Die Methoden der zugehörigen API arbeiten aber mit Callbacks statt mit Promises. Für neue Projekte mit Schreibzugriff ist die File System Access API (
FileSystemHandle) oder das Origin Private File System oft besser geeignet.