FileReader: loadend — Ereignis · JavaScript-Referenz

Signatur

fileReader.addEventListener("loadend", handler)

Beschreibung

Das loadend-Ereignis ist das letzte Ereignis im Lebenszyklus eines FileReader-Lesevorgangs. Es feuert immer nach genau einem der Ereignisse load (Erfolg), error (Fehler) oder abort (Abbruch durch abort()). Die Reihenfolge ist also: loadstart → progress (0–n mal) → load/error/abort → loadend.

Damit eignet sich loadend ideal für Aufräumarbeiten, die unabhängig vom Ergebnis nötig sind – etwa Ladeanzeigen ausblenden, Buttons wieder aktivieren oder ein Promise auflösen. Ähnlich wie ein finally-Block bei try/catch.

Der Handler kann per addEventListener("loadend", handler) oder über die Eigenschaft onloadend registriert werden. Er erhält ein ProgressEvent mit den Eigenschaften loaded, total und lengthComputable. Ob der Vorgang erfolgreich war, prüft man über reader.error (bei Erfolg null) bzw. reader.result.

Das Ereignis ist nicht abbrechbar und blubbert nicht (FileReader ist kein DOM-Knoten).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"loadend"`.
$handler Pflicht	(event: ProgressEvent<FileReader>) => void		Callback, der mit einem `ProgressEvent` aufgerufen wird. `event.target` ist der `FileReader`.
$options	boolean\|AddEventListenerOptions	false	Optionen wie `once` oder `signal` (siehe `addEventListener`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein ProgressEvent; das Leseergebnis steht in reader.result, ein eventueller Fehler in reader.error.

Beispiele

Ladeanzeige unabhängig vom Ergebnis ausblenden

const input = document.querySelector('#datei');
const spinner = document.querySelector('#spinner');

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  const reader = new FileReader();
  spinner.hidden = false;

  reader.addEventListener('load', () => {
    console.log('Gelesen:', reader.result.length, 'Zeichen');
  });
  reader.addEventListener('error', () => {
    console.error('Fehler:', reader.error.name);
  });
  reader.addEventListener('loadend', (event) => {
    // Läuft immer – wie ein finally
    spinner.hidden = true;
    console.log(`Fertig: ${event.loaded} von ${event.total} Bytes`);
  });

  reader.readAsText(file);
});

Gelesen: 1234 Zeichen Fertig: 1234 von 1234 Bytes

FileReader als Promise mit onloadend

const readFile = (blob) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onloadend = () => {
    if (reader.error) {
      reject(reader.error);
    } else if (reader.readyState === FileReader.DONE && reader.result !== null) {
      resolve(reader.result);
    } else {
      reject(new DOMException('Lesen abgebrochen', 'AbortError'));
    }
  };
  reader.readAsDataURL(blob);
});

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const dataUrl = await readFile(blob);
console.log(dataUrl);

data:text/plain;base64,SGFsbG8gV2VsdA==

Abbruch erkennen und Listener entfernen

const reader = new FileReader();

const onLoadEnd = (event) => {
  console.log('loadend, Ergebnis:', reader.result);
  reader.removeEventListener('loadend', onLoadEnd);
};

reader.addEventListener('abort', () => console.log('abgebrochen'));
reader.addEventListener('loadend', onLoadEnd);

reader.readAsArrayBuffer(new Blob([new Uint8Array(10_000_000)]));
reader.abort();

abgebrochen loadend, Ergebnis: null

// Wichtig · Fallstricke

Kein Erfolgssignal: loadend feuert auch bei Fehler und Abbruch. Wer nur das Ergebnis braucht, sollte load verwenden oder in loadend explizit reader.error bzw. reader.result !== null prüfen.
Bei abort() und bei Fehlern ist reader.result null.
Die Eigenschaft onloadend kann nur einen Handler halten; eine erneute Zuweisung überschreibt den vorherigen. Für mehrere Handler addEventListener nutzen.
Einen FileReader nicht erneut starten, solange readyState === LOADING ist – das wirft einen InvalidStateError. Ein neuer Lesevorgang darf erst in bzw. nach loadend beginnen.
Moderne Alternative: Blob.prototype.text(), arrayBuffer() und stream() liefern direkt Promises und machen Ereignis-Handling oft überflüssig.
Kompatibilität: In allen aktuellen Browsern sowie in Web Workern verfügbar; Node.js kennt FileReader nicht nativ (dort Blob-Methoden verwenden).

Siehe auch

FileReader FileReader: load FileReader: error FileReader: abort FileReader: progress FileReader: loadstart ProgressEvent Blob.prototype.text()