Arbeiten mit Dateien mithilfe der FileReader-API

Wenn ein Benutzer eine Datei in Ihrer Web-App auswählt, erhalten Sie ein File-Objekt – aber wie lesen Sie tatsächlich dessen Inhalt? Hier kommt die JavaScript FileReader-API ins Spiel. Dieser Artikel erklärt, wie FileReader funktioniert, wann Sie es verwenden sollten und wie es sich im Vergleich zu modernen Alternativen verhält.

Was ist die FileReader-API?

Die FileReader-API ist eine Browser-Schnittstelle, die den Inhalt von File- oder Blob-Objekten asynchron liest. Sie kann nicht auf beliebige Dateien im System des Benutzers über Pfadangaben zugreifen – sie funktioniert nur mit Dateien, die der Benutzer explizit ausgewählt hat, entweder über <input type="file"> oder eine Drag-and-Drop-Interaktion.

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

input.addEventListener('change', () => {
  const file = input.files[0]
  console.log(file.name, file.size, file.type)
})

Ein File-Objekt erbt von Blob, trägt also dieselben Eigenschaften plus name und lastModified. Sie übergeben es direkt an jede FileReader-Lesemethode.

Die drei zentralen Lesemethoden

Das Lesen lokaler Dateien in JavaScript mit FileReader bedeutet, das richtige Ausgabeformat zu wählen:

• readAsText(file, encoding?) — Gibt den Dateiinhalt als String zurück. Standardmäßig UTF-8. Nützlich für CSV, JSON, Klartext oder jedes textbasierte Format.
• readAsArrayBuffer(file) — Gibt rohe Binärdaten als ArrayBuffer zurück. Verwenden Sie dies für Bilder, Audio, PDFs oder jede binäre Verarbeitung.
• readAsDataURL(file) — Gibt eine Base64-kodierte data:-URL zurück. Praktisch für Bildvorschauen, aber beachten Sie, dass das Ergebnis aufgrund des Base64-Kodierungs-Overheads etwa 33 % größer ist als die Originaldatei.

Vermeiden Sie readAsBinaryString() — diese Methode ist veraltet. Verwenden Sie stattdessen readAsArrayBuffer() für Binärdaten.

Das ereignisgesteuerte Modell von FileReader

FileReader ist asynchron und kommuniziert über Events. Die wichtigsten sind:

Hier ist eine praktische Bildvorschau vor dem Upload mit readAsDataURL():

function previewImage(file) {
  const reader = new FileReader()

  reader.addEventListener('load', () => {
    const img = document.querySelector('#preview')
    img.src = reader.result
  })

  reader.addEventListener('error', () => {
    console.error('Failed to read file:', reader.error)
  })

  reader.readAsDataURL(file)
}

Das progress-Event ist besonders nützlich, um bei großen Dateien einen Fortschrittsbalken anzuzeigen:

reader.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percent = Math.round((event.loaded / event.total) * 100)
    progressBar.value = percent
  }
})

FileReader in ein Promise einbinden

Der Callback-Stil von FileReader kann sich in modernem asynchronem Code umständlich anfühlen. Ein einfacher Wrapper behebt das:

function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.addEventListener('load', () => resolve(reader.result))
    reader.addEventListener('error', () => reject(reader.error))
    reader.readAsText(file)
  })
}

// Verwendung
const text = await readFileAsText(file)

FileReader vs. Blob.text() und Blob.arrayBuffer()

Moderne Browser unterstützen Promise-basierte Methoden direkt auf Blob (und damit auch File):

// Moderner Ansatz — einfacher für grundlegende Lesevorgänge
const text = await file.text()
const buffer = await file.arrayBuffer()

Wann sollten Sie also noch FileReader verwenden? Wählen Sie es, wenn Sie Folgendes benötigen:

• Fortschrittsverfolgung über das progress-Event (obwohl bei lokalen Dateien einige Browser möglicherweise nur eine geringe Anzahl von Progress-Events auslösen)
• Unterstützung für Nicht-UTF-8-Kodierung über readAsText(file, 'ISO-8859-1')
• Base64-Daten-URLs über readAsDataURL()
• Breitere Unterstützung für Legacy-Browser

Für unkomplizierte Text- oder Binärlesevorgänge in modernen Apps sind Blob.text() und Blob.arrayBuffer() sauberer. Für Bildvorschauen vermeidet URL.createObjectURL(file) die Base64-Expansion und ist im Allgemeinen speichereffizienter als readAsDataURL(). Denken Sie nur daran, URL.revokeObjectURL() aufzurufen, wenn die Objekt-URL nicht mehr benötigt wird, um Speicherlecks zu vermeiden.

Fazit

Die FileReader-API bleibt ein praktisches Werkzeug für die Arbeit mit File-Objekten im Browser – insbesondere wenn Sie Progress-Events, Kodierungssteuerung oder Daten-URLs benötigen. Für einfachere Fälle erfordern die neueren Blob-Methoden weniger Code. Kennen Sie beide Ansätze, und Sie werden jedes Dateilesungsszenario sauber handhaben können.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.