Se trata de una "api" diseñada en específico para trabajar con la lectura de archivos. Una característica de esta es que por lo general se suele ejecutar en conjunto con promesas o eventos. Esta "api" trabaja en base al objeto FileReader, el cual permite trabajar con los datos enviados por el usuario; en otras palabras, este objeto permite manipular los archivos que hayan sido enviados por los usuarios.
Para crear el objeto de esta "api" se utiliza el constructor "FileReader()":
Ejemplo
Este objeto, al vincularse con un input de tipo "file", recibe el archivo enviado. Para obtener dicho archivo se utiliza el evento "change", el cual detecta cuando un input cambia de valor. En este caso es necesario pasarle un dato ("e") a la función del escuchador de eventos, para que de ese modo se pueda almacenar el archivo enviado. Si por otra parte se desea observar el archivo en cuestión, esto se puede hacer imprimiendo en consola la propiedad ".files", la cual es un array que recibe todos los archivos que sean enviados a través del input, de la siguiente forma:
Ejemplo
Resultado
Obtener el contenido de un archivo
Por otra parte, si lo que se quiere es manipular el archivo o leer su contenido, se necesita emplear la "api" "FileReader", más específicamente el método "readAsText", el cual permite leer el contenido de un archivo de tipo texto.
En el siguiente ejemplo se puede observar cómo se vincula un input de tipo "file", se inicializa el evento "change" y se aplica la función "leerArchivo()" al archivo enviado por el usuario. Esta función se iguala a una función flecha que recibe un dato ("ar"), la cual crea el objeto "FileReader()" para finalmente utilizar su función "readAsText()", a la cual se le envía el archivo recibido por la función para de ese modo leer su contenido.
Ejemplo
Por último, se inicializa un segundo escuchador de eventos con el evento "load" para determinar si la carga del archivo concluyó. Si esto sucede, se aplica una función flecha la cual convierte a JSON la cadena de texto obtenida del archivo (esto ya que el archivo es de tipo texto).
Nota: El resultado se encuentra en "e.currentTarget.result" ya que lo que se está mostrando en pantalla no es directamente la "api" en sí; debido a que se usa una función para convertir el dato en JSON, los datos de "reader" se envían a la variable "e". Estos datos se almacenan en "currentTarget" (target actual), y ya aquí dentro de los datos de la api se utiliza el método ".result", el cual contiene el contenido del archivo.
Resultado
Nota: El contenido del archivo es un JSON en formato texto, y se utiliza la función flecha dentro de "leerArchivo()" para convertirlo a formato JSON y mostrarlo en consola.
Otro ejemplo podría ser cómo acceder al contenido de múltiples archivos a la vez. Esto es útil debido a que en los input de tipo "file" es posible utilizar el atributo "multiple", el cual configura el input para que reciba X número de archivos. Para estos casos, una buena forma de acceder a estos datos es a través de un ciclo "for" para recorrer los elementos del array "files", ya que en este se almacenarán todos los elementos recibidos por el input.
Ejemplo
Resultado
Nota: Tener en cuenta que en este segundo ejemplo todo el array es enviado a la función, por lo tanto este se almacena en "ar".
readAsDataURL()
Se trata de un segundo método el cual permite obtener direcciones URL válidas que puedan ser utilizadas por el navegador; es decir, este método, en vez de obtener el texto del archivo, obtiene la dirección URL de este. En sí, la forma de trabajar de este método es exactamente la misma que "readAsText", con la diferencia de que este método únicamente funciona para aquellos tipos de archivos que pueden ser operados usando URL.
Ejemplo
En este ejemplo se tomó como base el código anterior, modificándolo para que trabaje en base a "readAsDataURL". Debido a que este método retorna la ruta del elemento, esta se almacena dentro de la variable "e" en la función flecha, más específicamente en "e.currentTarget.result".
Resultado
Nota: Este no es verdaderamente un código funcional; en su lugar es un código explicativo rápido, por lo que tiene varios aspectos mejorables. Por ejemplo, el constructor de los elementos HTML estaría fuera del bucle, a la vez que las imágenes se añadirían al interior de los elementos después de que el bucle culmine.
Nota: En este ejemplo el elemento "img" no es creado de forma correcta con "createElement", debido a esto no se generará un nodo de este elemento.