Signatur
Beschreibung
Die schreibgeschützte Eigenschaft name der Schnittstelle FileSystemEntry liefert den Namen einer Datei oder eines Verzeichnisses als String. Das ist nur die letzte Pfadkomponente, etwa "foto.jpg" oder "Urlaub". Den vollständigen Pfad innerhalb des virtuellen Dateisystems liefert fullPath, z. B. "/Urlaub/foto.jpg".
In der Praxis kommen FileSystemEntry-Objekte meist über Drag-and-drop in den Code, nämlich über DataTransferItem.webkitGetAsEntry(), oder über HTMLInputElement.webkitEntries bei einem <input type="file" webkitdirectory>. Mit name kann man Einträge anzeigen, nach Dateiendung filtern oder versteckte Dateien wie .DS_Store überspringen.
Da FileSystemFileEntry und FileSystemDirectoryEntry von FileSystemEntry erben, haben beide diese Eigenschaft. Ob es sich um eine Datei oder ein Verzeichnis handelt, zeigen isFile und isDirectory.
Rückgabewert
Beispiele
Namen abgelegter Dateien und Ordner ausgeben
const dropZone = document.querySelector('#drop-zone');
dropZone.addEventListener('dragover', (e) => e.preventDefault());
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
for (const item of e.dataTransfer.items) {
const entry = item.webkitGetAsEntry();
if (!entry) continue;
const art = entry.isDirectory ? 'Ordner' : 'Datei';
console.log(`${art}: ${entry.name} (${entry.fullPath})`);
}
});Verzeichnis rekursiv durchlaufen und nach Endung filtern
const readAll = (dirEntry) => new Promise((resolve, reject) => {
const reader = dirEntry.createReader();
const result = [];
const next = () => reader.readEntries((batch) => {
if (batch.length === 0) return resolve(result);
result.push(...batch);
next(); // readEntries liefert Ergebnisse in Portionen
}, reject);
next();
});
const collectImages = async (entry, images = []) => {
if (entry.name.startsWith('.')) return images; // versteckte Dateien überspringen
if (entry.isFile && /\.(jpe?g|png|webp)$/i.test(entry.name)) {
images.push(entry.fullPath);
} else if (entry.isDirectory) {
for (const child of await readAll(entry)) {
await collectImages(child, images);
}
}
return images;
};
// Nutzung im drop-Handler:
// const entry = e.dataTransfer.items[0].webkitGetAsEntry();
// console.log(await collectImages(entry));Einträge aus einem Ordner-Input anzeigen
// <input type="file" id="picker" webkitdirectory multiple>
const picker = document.querySelector('#picker');
picker.addEventListener('change', () => {
const names = picker.webkitEntries.map((entry) => entry.name);
console.log(names.length ? names : 'webkitEntries ist hier leer – files verwenden');
// Zuverlässiger Fallback: File.name und webkitRelativePath
for (const file of picker.files) {
console.log(file.name, file.webkitRelativePath);
}
});// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
entry.namewird ignoriert bzw. wirft im Strict Mode einenTypeError. Umbenennen ist über diese API im Browser nicht möglich. nameist kein Pfad. Für eindeutige SchlüsselfullPathverwenden, denn gleiche Namen können in verschiedenen Unterordnern vorkommen.- Die Groß- und Kleinschreibung bleibt so, wie sie im Betriebssystem vorliegt. Beim Filtern nach Endungen daher ohne Beachtung der Schreibweise vergleichen (Flag
/i). - Die File and Directory Entries API ist in Chrome, Edge, Firefox und Safari verfügbar, aber kein offizieller W3C-Standard. Viele Einstiegspunkte tragen das Präfix
webkit, etwawebkitGetAsEntry(). Für neuen Code, der Dateien lesen und schreiben soll, ist die File System Access API (FileSystemHandle.name) oft besser geeignet, die es jedoch nur in Chromium-Browsern vollständig gibt. webkitGetAsEntry()muss synchron imdrop-Handler aufgerufen werden. Nach dem Event istdataTransferleer.