Cómo leer un archivo de texto en JavaScript

Leer archivos en JavaScript es una tarea común en el desarrollo web, especialmente cuando se necesita procesar datos locales del usuario. A continuación, se explica cómo leer un archivo de texto utilizando JavaScript, paso a paso.

1. Utilizando la API FileReader

La API FileReader es una de las formas más sencillas de leer archivos en JavaScript. Permite a las aplicaciones web leer el contenido de los archivos (o blobs) de forma asíncrona.

const inputElement = document.createElement('input');
inputElement.type = 'file';

inputElement.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        const fileContent = e.target.result;
        console.log(fileContent);
    };

    reader.onerror = (e) => {
        console.error("Error reading file", e);
    };

    reader.readAsText(file);
});

document.body.appendChild(inputElement);

En este ejemplo, se crea un elemento input de tipo ‘file’ que permite al usuario seleccionar un archivo. Cuando se selecciona un archivo, se lee su contenido utilizando un FileReader y se muestra en la consola.

2. Utilizando la API Fetch y File

Otra forma de leer archivos es utilizando la API Fetch, especialmente si el archivo está disponible en el servidor. Aquí se muestra cómo hacerlo:

fetch('ruta/al/archivo.txt')
    .then(response => response.text())
    .then(text => {
        console.log(text);
    })
    .catch(error => {
        console.error('Error fetching file:', error);
    });

Este método es útil para leer archivos alojados en el servidor. La función fetch realiza una solicitud HTTP y la respuesta se convierte a texto con response.text().

Conclusión

Leer archivos en JavaScript puede lograrse fácilmente usando la API FileReader para archivos locales o la API Fetch para archivos en el servidor. Ambos métodos proporcionan una forma sencilla y eficiente de manejar archivos en aplicaciones web.