Signatur
Beschreibung
Die Methode readEntries() eines FileSystemDirectoryReader liest die Einträge (Dateien und Unterverzeichnisse) des Verzeichnisses, zu dem der Reader gehört. Einen Reader bekommst du über FileSystemDirectoryEntry.createReader(), meistens nachdem ein Ordner per Drag & Drop (DataTransferItem.webkitGetAsEntry()) oder über ein <input type="file" webkitdirectory> bereitgestellt wurde.
Wichtig: Ein Aufruf liefert nicht unbedingt alle Einträge. Chromium gibt zum Beispiel höchstens 100 Einträge pro Aufruf zurück. Du musst readEntries() deshalb so lange wiederholt auf demselben Reader aufrufen, bis der Callback ein leeres Array bekommt. Erst dann ist das Verzeichnis vollständig gelesen.
Die API arbeitet nur mit Callbacks. In modernem Code packt man sie deshalb meist in ein Promise und liest dann mit async/await in einer Schleife oder rekursiv ganze Verzeichnisbäume ein. Jeder Eintrag ist entweder ein FileSystemFileEntry (isFile === true) oder ein FileSystemDirectoryEntry (isDirectory === true).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $successCallback Pflicht | (entries: FileSystemEntry[]) => void | Wird mit einem Array der nächsten Verzeichniseinträge aufgerufen. Ein leeres Array bedeutet, dass es keine weiteren Einträge gibt. | |
| $errorCallback | (error: DOMException) => void | Wird bei einem Fehler aufgerufen, z. B. wenn das Verzeichnis nicht mehr lesbar ist (NotFoundError) oder der Reader gerade schon liest (InvalidStateError). |
Rückgabewert
Beispiele
Einfacher Aufruf: ersten Block von Einträgen ausgeben
// dirEntry ist ein FileSystemDirectoryEntry, z. B. aus einem Drop-Event
const reader = dirEntry.createReader();
reader.readEntries(
(entries) => {
for (const entry of entries) {
console.log(entry.isDirectory ? '📁' : '📄', entry.name);
}
},
(err) => console.error('Lesefehler:', err.name)
);Alle Einträge vollständig lesen (Promise-Wrapper mit Schleife)
const readBatch = (reader) =>
new Promise((resolve, reject) => reader.readEntries(resolve, reject));
const readAllEntries = async (dirEntry) => {
const reader = dirEntry.createReader(); // denselben Reader wiederverwenden!
const all = [];
let batch;
do {
batch = await readBatch(reader);
all.push(...batch);
} while (batch.length > 0);
return all;
};
const entries = await readAllEntries(dirEntry);
console.log(`${entries.length} Einträge gefunden`);Ordner per Drag & Drop rekursiv einlesen
const readBatch = (reader) =>
new Promise((resolve, reject) => reader.readEntries(resolve, reject));
const getFile = (fileEntry) =>
new Promise((resolve, reject) => fileEntry.file(resolve, reject));
const collectFiles = async (entry, files = []) => {
if (entry.isFile) {
files.push({ path: entry.fullPath, file: await getFile(entry) });
} else if (entry.isDirectory) {
const reader = entry.createReader();
let batch;
while ((batch = await readBatch(reader)).length > 0) {
for (const child of batch) await collectFiles(child, files);
}
}
return files;
};
const dropZone = document.querySelector('#drop-zone');
dropZone.addEventListener('dragover', (e) => e.preventDefault());
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
// Einträge SYNCHRON holen, bevor das DataTransfer ungültig wird
const roots = [...e.dataTransfer.items]
.map((item) => item.webkitGetAsEntry())
.filter(Boolean);
const results = [];
for (const root of roots) await collectFiles(root, results);
results.forEach(({ path, file }) => console.log(path, file.size, 'Bytes'));
});// Wichtig · Fallstricke
- Häufigster Fehler:
readEntries()nur einmal aufrufen. In Chromium kommen pro Aufruf höchstens 100 Einträge zurück, bei größeren Ordnern fehlen dann still und ohne Fehlermeldung Dateien. Deshalb immer so lange aufrufen, bis ein leeres Array kommt. - Für jeden weiteren Aufruf denselben Reader verwenden. Ein neuer Reader über
createReader()fängt wieder von vorne an, und die Schleife endet nie. - Rufst du die Methode erneut auf, bevor der vorige Aufruf fertig ist, gibt es einen
InvalidStateError. Also nacheinander mitawaitlesen, nicht parallel. - Bei Drag & Drop gilt
DataTransfernur synchron imdrop-Handler.webkitGetAsEntry()musst du deshalb aufrufen, bevor zum ersten Malawaitkommt. - Die Reihenfolge der Einträge ist nicht festgelegt. Wenn du eine Reihenfolge brauchst, sortiere selbst.
- Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen die Methode. Sie gehört zur älteren File and Directory Entries API. Für neuen Code mit Lese- und Schreibzugriff ist die File System API (
FileSystemDirectoryHandle,showDirectoryPicker()) die modernere Alternative, wird aber nicht überall unterstützt.