FileReader.readyState — Eigenschaft · JavaScript-Referenz

Signatur

FileReader.readyState

Beschreibung

Die schreibgeschützte Eigenschaft readyState eines FileReader-Objekts zeigt, in welcher Phase sich der Lesevorgang befindet. Der Wert ist immer eine der drei Konstanten, die auf dem Interface selbst definiert sind:

FileReader.EMPTY (0): Es wurden noch keine Daten geladen. Das ist der Ausgangszustand, bevor eine Lesemethode aufgerufen wurde.
FileReader.LOADING (1): Die Daten werden gerade gelesen, zum Beispiel nach readAsText() oder readAsArrayBuffer().
FileReader.DONE (2): Der Lesevorgang ist beendet: erfolgreich, mit Fehler oder durch abort() abgebrochen.

Die Eigenschaft ist vor allem nützlich, um Mehrfachaufrufe abzufangen. Ruft man eine readAs*()-Methode auf, während readyState auf LOADING steht, wird eine InvalidStateError-DOMException geworfen. Außerdem hilft sie bei der Fehlersuche und bei der Entscheidung, ob abort() überhaupt nötig ist.

Für die eigentliche Ablaufsteuerung sind die Events load, error, abort und loadend meist die bessere Wahl. readyState ergänzt sie als synchron abfragbarer Zustand. Ob ein Lesevorgang erfolgreich war, verrät DONE allein nicht. Dafür prüft man zusätzlich reader.error bzw. reader.result.

Rückgabewert

Typ

number

Beschreibung

0 (FileReader.EMPTY), 1 (FileReader.LOADING) oder 2 (FileReader.DONE).

Beispiele

Zustände während des Lesens protokollieren

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const reader = new FileReader();

console.log('vorher:', reader.readyState);

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

reader.readAsText(blob);
console.log('nach readAsText:', reader.readyState);

vorher: 0 nach readAsText: 1 loadend: 2 Hallo Welt

Doppelten Lesevorgang verhindern (InvalidStateError)

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

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

  // Laufenden Vorgang abbrechen, statt einen InvalidStateError zu riskieren
  if (reader.readyState === FileReader.LOADING) {
    reader.abort();
  }
  reader.readAsDataURL(file);
});

reader.onload = () => {
  document.querySelector('img').src = reader.result;
};

Promise-Wrapper mit Zustandsprüfung

const readFileAsText = (file) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onloadend = () => {
    // DONE heißt nur „fertig“ – Erfolg separat prüfen
    if (reader.readyState === FileReader.DONE && !reader.error) {
      resolve(reader.result);
    } else {
      reject(reader.error ?? new Error('Lesevorgang abgebrochen'));
    }
  };
  reader.readAsText(file);
});

const text = await readFileAsText(new Blob(['CSV;Daten']));
console.log(text);

CSV;Daten

// Wichtig · Fallstricke

DONE bedeutet nicht Erfolg: Auch nach einem Fehler oder abort() steht readyState auf 2. Prüfe zusätzlich reader.error.
Ruft man eine readAs*()-Methode auf, während der Zustand LOADING ist, wird ein InvalidStateError geworfen. Wiederholte Lesevorgänge brauchen deshalb einen neuen FileReader oder vorher abort().
Ein FileReader im Zustand DONE lässt sich für einen neuen Lesevorgang wiederverwenden.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert, im Strict Mode werfen sie einen TypeError.
Vergleiche besser mit den Konstanten FileReader.EMPTY, LOADING und DONE als mit den nackten Zahlen, das ist lesbarer.
Für neuen Code sind oft Blob.prototype.text() und arrayBuffer() einfacher, weil sie direkt ein Promise liefern.
Kompatibilität: Wird von allen modernen Browsern und in Web Workern unterstützt. Node.js hat keinen FileReader, dort nutzt man Blob-Methoden oder fs.

Siehe auch

FileReader FileReader.result FileReader.error FileReader.abort() FileReader.readAsText() Blob.prototype.text()