JavaScript File et FileReader

Les applications web ont régulièrement besoin de travailler avec des fichiers sélectionnés par l'utilisateur : lire un document texte, prévisualiser une image avant de la téléverser, ou traiter des données binaires dans le navigateur. JavaScript gère cela grâce à deux interfaces étroitement liées. L'interface File décrit un fichier unique (son nom, sa taille et son type), et l'interface FileReader lit le contenu de ce fichier de manière asynchrone sans jamais l'envoyer à un serveur.

Ce guide explique comment obtenir un File à partir d'un <input>, le lire avec FileReader, et utiliser les méthodes plus récentes basées sur les promesses file.text() et file.arrayBuffer(). Un File est un type spécialisé de Blob, donc la plupart de ce que vous apprendrez ici s'applique également aux blobs ; consultez la vue d'ensemble de la File API pour le tableau complet.

Comprendre l'interface File en JavaScript

L'interface File représente les données d'un seul fichier. Les fichiers proviennent généralement d'un élément <input type="file">, d'une opération de glisser-déposer, ou de la Clipboard API. Comme un File étend Blob, il contient le contenu du fichier ainsi que des métadonnées à son sujet.

Propriétés clés de l'interface File

• name : Le nom du fichier sous forme de string, par ex. "report.pdf".
• size : La taille du fichier en octets (un nombre).
• type : Le type MIME sous forme de string, par ex. "image/png". Peut être "" si le navigateur ne peut pas le déterminer.
• lastModified : Un horodatage (millisecondes depuis l'époque Unix) indiquant quand le fichier a été modifié pour la dernière fois.

Obtenir des fichiers depuis un input

Un <input> de type fichier expose une propriété files — un FileList, qui se comporte comme un array. Utilisez event.target.files[0] pour le premier fichier, ou définissez l'attribut multiple et itérez sur files pour en gérer plusieurs à la fois.

Exemple : Afficher les informations d'un fichier

Voici une manière simple d'afficher des informations sur un fichier sélectionné par l'utilisateur :

<input type="file" id="fileInput" />
<div id="fileInfo"></div>

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return; // user cancelled the dialog
  const modified = new Date(file.lastModified).toLocaleString();
  const info = `File Name: ${file.name}<br>
    File Size: ${file.size} bytes<br>
    File Type: ${file.type || 'unknown'}<br>
    Last Modified: ${modified}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Exploiter l'API FileReader

L'interface FileReader lit le contenu d'un File ou d'un Blob de manière asynchrone. Vous démarrez une lecture avec l'une de ses méthodes readAs…, puis vous gérez le résultat via des événements — les données réelles ne bloquent jamais le thread principal.

Méthodes de FileReader

• readAsText(file) : Lit le fichier sous forme de string texte (optionnellement avec un encodage donné).
• readAsDataURL(file) : Lit le fichier sous forme d'URL de données encodée en base64 — pratique pour les aperçus <img src>.
• readAsArrayBuffer(file) : Lit le fichier sous forme d'ArrayBuffer d'octets bruts pour le traitement binaire.

Événements de FileReader

La lecture étant asynchrone, vous attachez les gestionnaires avant d'appeler une méthode readAs… :

• onload : Se déclenche lorsque la lecture se termine avec succès ; les données se trouvent dans reader.result (également disponible via event.target.result).
• onerror : Se déclenche si la lecture échoue ; inspectez reader.error.
• onprogress : Se déclenche périodiquement pendant la lecture ; event.loaded et event.total vous permettent d'afficher une barre de progression pour les fichiers volumineux.

Exemple : Lire un fichier texte

L'exemple suivant lit un fichier texte avec FileReader et affiche son contenu, ainsi qu'un pourcentage de progression :

<input type="file" id="textInput" />
<div id="textOutput">Upload a text file please</div>

document.getElementById('textInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;
  const output = document.getElementById('textOutput');
  const reader = new FileReader();
  reader.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      output.textContent = `Reading… ${percent}%`;
    }
  };
  reader.onload = function(e) {
    output.textContent = e.target.result;
  };
  reader.onerror = function() {
    output.textContent = 'Error reading file: ' + reader.error;
  };
  reader.readAsText(file);
});

Lecture avancée de fichiers : gérer différents types de données

Lire des images sous forme d'URL de données

Pour afficher un fichier image sélectionné par l'utilisateur, vous pouvez le lire sous forme d'URL de données à l'aide de la méthode readAsDataURL. Cette méthode encode le fichier en une string base64, qui peut être utilisée directement dans des éléments image.

Exemple : Afficher une image

<input type="file" id="imageInput" />
<div>Select an image file, please.</div>
<img id="imageDisplay" />

document.getElementById('imageInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('imageDisplay').src = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('imageDisplay').style.display = 'none';
    alert('Error reading image file.');
  };
  reader.readAsDataURL(file);
});

Lire des fichiers binaires avec ArrayBuffer

Pour les applications qui doivent traiter de l'audio, de la vidéo ou tout autre donnée binaire, lire le fichier sous forme d'ArrayBuffer est indispensable. Cette méthode fournit un buffer générique de données binaires, qui peut être manipulé ou transmis à d'autres API comme Web Audio ou WebGL.

Exemple : Traiter des données binaires

<input type="file" id="binaryInput" />
<div id="binaryOutput">Select any file.</div>

document.getElementById('binaryInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const buffer = e.target.result;
    // Process the binary data
    const info = `Buffer Length: ${buffer.byteLength} bytes`;
    document.getElementById('binaryOutput').innerHTML = info;
  };
  reader.onerror = function() {
    document.getElementById('binaryOutput').innerHTML = 'Error reading binary file.';
  };
  reader.readAsArrayBuffer(file);
});

La méthode moderne : file.text() et file.arrayBuffer()

FileReader est antérieur aux promesses, donc son API basée sur les événements peut paraître verbeuse. Tous les navigateurs modernes ajoutent des méthodes retournant des promesses directement sur File/Blob, ce qui vous permet de lire avec async/await :

• file.text() : Résout vers le contenu du fichier sous forme de string UTF-8.
• file.arrayBuffer() : Résout vers un ArrayBuffer des octets bruts.
• file.stream() : Retourne un ReadableStream pour traiter de très grands fichiers en morceaux.

<input type="file" id="modernInput" />

document.getElementById('modernInput').addEventListener('change', async function(event) {
  const file = event.target.files[0];
  if (!file) return;
  try {
    const text = await file.text();
    console.log('First 100 characters:', text.slice(0, 100));

    const buffer = await file.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    console.log('Total bytes:', bytes.length);
    console.log('First byte:', bytes[0]);
  } catch (err) {
    console.error('Could not read file:', err);
  }
});

Préférez ces méthodes basées sur les promesses pour tout nouveau code — elles s'intègrent parfaitement avec async/await et try/catch. Recourez à FileReader lorsque vous avez besoin des événements onprogress ou devez prendre en charge un navigateur très ancien. Pour envoyer des fichiers à un serveur en morceaux réutilisables, combinez file.slice() avec ces lectures — consultez resumable file upload.

Conclusion

L'interface File vous renseigne sur un fichier (nom, taille, type, lastModified), tandis que FileReader et les nouvelles promesses file.text() / file.arrayBuffer() vous permettent de lire son contenu sans aller-retour vers le serveur. Ensemble, ils couvrent les besoins courants : afficher les métadonnées d'un fichier, prévisualiser des images, analyser du texte et traiter des données binaires entièrement dans le navigateur.

Pour aller plus loin, explorez le type Blob sur lequel File est construit, ainsi que la vue d'ensemble de la File API.

Pratique