Travailler avec des fichiers en utilisant l'API FileReader

Lorsqu’un utilisateur sélectionne un fichier dans votre application web, vous obtenez un objet File — mais comment lire réellement son contenu ? C’est là qu’intervient l’API JavaScript FileReader. Cet article explique le fonctionnement de FileReader, quand l’utiliser et comment elle se compare aux alternatives modernes.

Qu’est-ce que l’API FileReader ?

L’API FileReader est une interface navigateur qui lit le contenu des objets File ou Blob de manière asynchrone. Elle ne peut pas accéder à des fichiers arbitraires sur le système de l’utilisateur par leur chemin — elle fonctionne uniquement avec des fichiers que l’utilisateur a explicitement sélectionnés, soit via <input type="file">, soit par une interaction de glisser-déposer.

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

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

Un objet File hérite de Blob, il possède donc les mêmes propriétés plus name et lastModified. Vous le passez directement à n’importe quelle méthode de lecture FileReader.

Les trois méthodes de lecture principales

Lire des fichiers locaux en JavaScript avec FileReader signifie choisir le bon format de sortie :

• readAsText(file, encoding?) — Renvoie le contenu du fichier sous forme de chaîne de caractères. UTF-8 par défaut. Utile pour CSV, JSON, texte brut ou tout format textuel.
• readAsArrayBuffer(file) — Renvoie des données binaires brutes sous forme d’ArrayBuffer. À utiliser pour les images, l’audio, les PDF ou tout traitement binaire.
• readAsDataURL(file) — Renvoie une URL data: encodée en base64. Pratique pour les aperçus d’images, mais notez que le résultat est environ 33 % plus volumineux que le fichier original en raison de la surcharge d’encodage base64.

Évitez readAsBinaryString() — elle est dépréciée. Utilisez plutôt readAsArrayBuffer() pour les données binaires.

Le modèle événementiel de FileReader

FileReader est asynchrone et communique via des événements. Les principaux sont :

Voici un exemple pratique d’aperçu d’image avant téléversement utilisant 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)
}

L’événement progress est particulièrement utile pour afficher une barre de progression avec des fichiers volumineux :

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

Encapsuler FileReader dans une Promise

Le style callback de FileReader peut sembler maladroit dans du code asynchrone moderne. Un simple wrapper résout ce problème :

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)
  })
}

// Utilisation
const text = await readFileAsText(file)

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

Les navigateurs modernes prennent en charge des méthodes basées sur les promesses directement sur Blob (et donc sur File) :

// Approche moderne — plus simple pour les lectures basiques
const text = await file.text()
const buffer = await file.arrayBuffer()

Alors, quand devriez-vous encore utiliser FileReader ? Choisissez-le lorsque vous avez besoin de :

• Suivi de progression via l’événement progress (bien que pour les fichiers locaux, certains navigateurs ne déclenchent qu’un petit nombre d’événements de progression)
• Support d’encodage non-UTF-8 via readAsText(file, 'ISO-8859-1')
• URL de données en base64 via readAsDataURL()
• Support plus large des navigateurs anciens

Pour des lectures textuelles ou binaires simples dans des applications modernes, Blob.text() et Blob.arrayBuffer() sont plus propres. Pour les aperçus d’images, URL.createObjectURL(file) évite l’expansion base64 et est généralement plus efficace en mémoire que readAsDataURL(). N’oubliez simplement pas d’appeler URL.revokeObjectURL() lorsque l’URL d’objet n’est plus nécessaire pour éviter les fuites mémoire.

Conclusion

L’API FileReader reste un outil pratique pour travailler avec des objets File dans le navigateur — en particulier lorsque vous avez besoin d’événements de progression, de contrôle d’encodage ou d’URL de données. Pour les cas plus simples, les nouvelles méthodes Blob nécessitent moins de code. Maîtrisez les deux, et vous gérerez proprement n’importe quel scénario de lecture de fichiers.

FAQ

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.