Skip to content

article.md

Latest commit

 

History

History
142 lines (95 loc) · 5.65 KB

article.md

File metadata and controls

142 lines (95 loc) · 5.65 KB

Archivo y Lector de Archivos (File and FileReader en inglés)

Un Archivo hereda de Blob y es extendido con capacidades relacionadas con el sistema de archivos.

Hay dos maneras de obtenerlo

Primero, hay un constructor, similar al de Blob:

new File(fileParts, fileName, [options])
  • fileParts -- es un array de valores Blob/BufferSource/String.
  • fileName -- la cadena del nombre del archivo.
  • options -- objeto opcional:
    • lastModified -- la timestamp (fecha en enteros) de la última modificación.

Segundo, a menudo obetenemos un archivo mediante un <input type="file"> o un drag'n'drop, u otra interfaz del navegador. En este caso el archivo obtiene la información del Sistema Operativo.

Como File (Archivo) hereda de Blob, objetos de tipo File tienen las mismas propiedades, mas:

  • name -- el nombre del archivo,
  • lastModified -- la timestamp de la última modificación.

Así es como obtenemos un objeto File desde <input type="file"> :

<input type="file" onchange="showFile(this)">

<script>
function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // e.g my.png
  alert(`Last modified: ${file.lastModified}`); // e.g 1552830408824
}
</script>
Como un input puede seleccionar varios archivos,`input.files` es objeto parecido a un array, que los contiene. En este caso tenemos un solo archivo, por eso solo nesecitamos tomar `input.files[0]`.

Lector de Archivos

Lector de Archivos es un objeto con el único porpósito de leer datos desde objetos de tipo Blob (y entonces File también).

El entrega los datos usando evetos, debido a que leerlos desde el disco puede tomar tiempo.

El constructor:

let reader = new FileReader(); // sin argumentos

Los métodos principales:

  • readAsArrayBuffer(blob) -- lee los datos en el formato binario ArrayBuffer.

  • readAsText(blob, [encoding]) -- lee los datos como una cadena de texto con el formato especificado (utf-8 por defecto).

  • readAsDataURL(blob) -- lee los datos binarios y los codifica como Datos URIs

  • abort() -- cancela la operación.

La opción de read* metodo depende de que formato preferimos, como vamos a usar los datos.

  • readAsArrayBuffer -- para archivos binarios, para hacer operaciones binarias de bajo nivel. Para operaciones de alto nivel, como slicing, File hereda de Blob, entonces podemos llamarlas directamente, sin tener que leer.
  • readAsText -- para archivos de texto, cuando nesecitamos obtener una cadena.
  • readAsDataURL -- cuando nesecitamos usar estos datos valores de src en img o otras etiquetas html. Hay otra alternativa para leer archivos con este último fin, como es discutido en el capítulo info:blob: URL.createObjectURL(file).

En la medida que la lectura procede, suceden varios eventos:

  • loadstart -- lectura iniciada.
  • progress -- ocurre mientras se lee.
  • load -- lectura completada, sin errores.
  • abort -- abort() ha sido llamado.
  • error -- ha ocurrido un error .
  • loadend -- lectura termindada tanto exitosa como fallidamente.

Cuando la lectura finaliza, podemos acceder al resultado como:

  • reader.result el resultado (si fue exitoso)
  • reader.error el error (si hubo fallo).

Los mas ampliamente usados son seguramente load y error.

Un ejemplo de como leer un archivo:

<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  };

  reader.onerror = function() {
    console.log(reader.error);
  };

}
</script>

```smart header="FileReader para blobs" Como mencionamos en el capítulo info:blob, `FileReader` no solo lee archivos, sino también cualquier blob.

Podemos usarlo para convertir un blob a otro formato:

  • readAsArrayBuffer(blob) -- a ArrayBuffer,
  • readAsText(blob, [encoding]) -- a cadena (una alternativa al TextDecoder),
  • readAsDataURL(blob) -- a Dato Uri.


```smart header="`FileReaderSync` está disponible dentro de  Web Workers"
Para Web Workers, también existe una variante síncrona de `FileReader`, llamada [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).

Sus metodos`read*` no generan eventos, sino que devuelven un resultado, como las funciones regulares.

Esto es solo dentro de un Web Worker, debido a que  demoras en  llamadas síncronas  mientras se lee el archivo en Web Worker no son tan importantes. No afectan la página.

Sumario

Los objetos File heredan de Blob.

En adición a los métodos y porpiedades de Blob, los objetos File también tienen name and lastModified mas la habilidad interna de leer del sistema de archivos. Usualmente obtenemos los objetos File mediante la entrada por el usuario con <input> o un evento Drag'n'Drop (ondragend).

Objetos FileReader pueden leer desde un archivo o un blob, en uno de estos tres formatos:

  • String (readAsText) .
  • ArrayBuffer (readAsArrayBuffer).
  • Datos Uri (readAsDataURL).

En muchos casos, no nesecitamos leer el contenido de un archivo. Como hicimos con blobs, podemos crear un url corto con URL.createObjectURL(file) y asignárselo a un <a> o <img>. De esta manera el archivo puede ser descargado o ser mostrado como una imagen, o como parte de un canvas etc.

Y si vamos a mandar un File por la red, es también fácil: APIs como XMLHttpRequest o fetch acceptan nativamente objetos File .