FileReader: error — Ereignis · JavaScript-Referenz

Signatur

fileReader.addEventListener("error", handler)

Beschreibung

Das error-Ereignis tritt auf, wenn ein mit readAsText(), readAsDataURL(), readAsArrayBuffer() oder readAsBinaryString() gestarteter Lesevorgang fehlschlägt. Typische Ursachen: Die Datei wurde nach der Auswahl gelöscht oder verschoben, sie ist gesperrt, es fehlen Berechtigungen, oder der Lesevorgang übersteigt Ressourcengrenzen.

Das Ereignis ist ein ProgressEvent, das nicht aufsteigt (bubbles) und nicht abbrechbar ist. Die eigentliche Fehlerursache steht nicht im Ereignisobjekt, sondern in der Eigenschaft reader.error – einem DOMException-Objekt mit name wie NotFoundError, NotReadableError, SecurityError oder EncodingError. reader.result ist in diesem Fall null und reader.readyState ist 2 (DONE).

Registrieren lässt sich der Handler per addEventListener("error", handler) oder über die Eigenschaft onerror. Nach error folgt immer noch das loadend-Ereignis – ein guter Ort für Aufräumarbeiten, die unabhängig von Erfolg oder Fehler laufen sollen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"error"`.
$handler Pflicht	(event: ProgressEvent<FileReader>) => void		Callback, der beim Fehlschlagen des Lesevorgangs aufgerufen wird. `event.target` ist der `FileReader`; die Ursache steht in `event.target.error`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `{ once: true }` oder `{ signal }`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler erhält ein ProgressEvent.

Beispiele

Fehler beim Einlesen einer ausgewählten Datei abfangen

const input = document.querySelector('input[type="file"]');

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

  const reader = new FileReader();

  reader.addEventListener('load', () => {
    console.log('Inhalt:', reader.result.slice(0, 100));
  });

  reader.addEventListener('error', () => {
    // Ursache steckt in reader.error (DOMException)
    console.error(`Lesen fehlgeschlagen: ${reader.error.name} – ${reader.error.message}`);
  });

  reader.addEventListener('loadend', () => {
    console.log('Lesevorgang beendet, readyState =', reader.readyState);
  });

  reader.readAsText(file);
});

Lesen fehlgeschlagen: NotFoundError – A requested file or directory could not be found at the time an operation was processed. Lesevorgang beendet, readyState = 2

FileReader als Promise mit onerror kapseln

const readFileAsDataURL = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.onabort = () => reject(new DOMException('Abgebrochen', 'AbortError'));
    reader.readAsDataURL(file);
  });

const input = document.querySelector('#avatar');
input.addEventListener('change', async () => {
  try {
    const url = await readFileAsDataURL(input.files[0]);
    document.querySelector('#preview').src = url;
  } catch (err) {
    const meldung = {
      NotFoundError: 'Die Datei wurde nicht gefunden.',
      NotReadableError: 'Die Datei konnte nicht gelesen werden.',
      SecurityError: 'Zugriff auf die Datei verweigert.'
    }[err.name] ?? `Unbekannter Fehler: ${err.name}`;
    alert(meldung);
  }
});

Fehler-Listener wieder entfernen

const reader = new FileReader();

const onError = () => {
  console.warn('Fehler:', reader.error?.name);
};

reader.addEventListener('error', onError);

reader.addEventListener('loadend', () => {
  // Aufräumen, egal ob Erfolg oder Fehler
  reader.removeEventListener('error', onError);
  console.log('Listener entfernt');
}, { once: true });

reader.readAsArrayBuffer(new Blob(['Hallo Welt']));

Listener entfernt

// Wichtig · Fallstricke

Ursache nicht im Event: Das ProgressEvent enthält keine Fehlerinformation – immer reader.error auswerten. reader.result ist nach einem Fehler null.
Nicht mit abort verwechseln: Ein Aufruf von reader.abort() löst abort aus, nicht error. Beide werden von loadend gefolgt.
Häufiger Auslöser: Der Nutzer wählt eine Datei aus und löscht oder verändert sie vor dem Lesen – dann meist NotFoundError bzw. NotReadableError (in Chrome auch bei nachträglich geänderten Dateien).
Kein try/catch: Lesefehler sind asynchron und werden nicht als Exception geworfen; ohne error-Handler bleiben sie still. Nur ein Aufruf während eines laufenden Lesevorgangs wirft synchron InvalidStateError.
Modernere Alternative: Blob.prototype.text(), arrayBuffer() und stream() liefern Promises, deren Ablehnung die gleichen Fehler transportiert.
Kompatibilität: In allen modernen Browsern unterstützt, ebenso in Web Workern. In Node.js existiert FileReader nicht nativ (dort Blob-Methoden bzw. fs verwenden).

Siehe auch

FileReader FileReader.error FileReader.prototype.readAsText() ProgressEvent DOMException Blob.prototype.text()