diff --git a/4-binary/04-file/article.md b/4-binary/04-file/article.md index 20878b650..217a57432 100644 --- a/4-binary/04-file/article.md +++ b/4-binary/04-file/article.md @@ -1,27 +1,27 @@ -# File and FileReader +# File y FileReader -A [File](https://www.w3.org/TR/FileAPI/#dfn-file) object inherits from `Blob` and is extended with filesystem-related capabilities. +Un [File](https://www.w3.org/TR/FileAPI/#dfn-file) hereda de `Blob` y extiende las capacidades relacionadas con el sistema de archivos. -There are two ways to obtain it. +Hay dos maneras de obtenerlo -First, there's a constructor, similar to `Blob`: +Primero, hay un constructor, similar al de `Blob`: ```js new File(fileParts, fileName, [options]) ``` -- **`fileParts`** -- is an array of Blob/BufferSource/String values. -- **`fileName`** -- file name string. -- **`options`** -- optional object: - - **`lastModified`** -- the timestamp (integer date) of last modification. +- **`fileParts`** -- es un array con valores de tipo Blob/BufferSource/String. +- **`fileName`** -- el nombre del archivo.. +- **`options`** -- objeto opcional: + - **`lastModified`** -- la marca de tiempo (fecha en mili-segundos, de tipo entero) de la última modificación. -Second, more often we get a file from `` or drag'n'drop or other browser interfaces. In that case, the file gets this information from OS. +Segundo, a menudo obtenemos un archivo mediante un `` o arrastrar y soltar u otras interfaces del navegador. En este caso el archivo obtiene la información del Sistema Operativo. -As `File` inherits from `Blob`, `File` objects have the same properties, plus: -- `name` -- the file name, -- `lastModified` -- the timestamp of last modification. +Como `File` (Archivo) hereda de `Blob`, objetos de tipo `File` tienen las mismas propiedades, mas: +- `name` -- el nombre del archivo, +- `lastModified` -- la marca de tiempo de la última modificación. -That's how we can get a `File` object from ``: +Así es como obtenemos un objeto `File` desde `` : ```html run @@ -37,49 +37,49 @@ function showFile(input) { ``` ```smart -The input may select multiple files, so `input.files` is an array-like object with them. Here we have only one file, so we just take `input.files[0]`. +El input puede seleccionar varios archivos, por lo que `input.files` es un array de dichos archivos . En este caso tenemos un solo archivo por lo que solo es necesario usar `input.files[0]`. ``` ## FileReader -[FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader) is an object with the sole purpose of reading data from `Blob` (and hence `File` too) objects. +[FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader) es un objeto con el único porpósito de leer datos desde objetos de tipo `Blob` (por lo tanto `File` también). -It delivers the data using events, as reading from disk may take time. +El entrega los datos usando eventos debido a que leerlos desde el disco puede tomar un tiempo. -The constructor: +El constructor: ```js -let reader = new FileReader(); // no arguments +let reader = new FileReader(); // sin argumentos ``` -The main methods: +Los métodos principales: -- **`readAsArrayBuffer(blob)`** -- read the data in binary format `ArrayBuffer`. -- **`readAsText(blob, [encoding])`** -- read the data as a text string with the given encoding (`utf-8` by default). -- **`readAsDataURL(blob)`** -- read the binary data and encode it as base64 data url. -- **`abort()`** -- cancel the operation. +- **`readAsArrayBuffer(blob)`** -- lee los datos en formato binario `ArrayBuffer`. +- **`readAsText(blob, [codificación])`** -- lee los datos como una cadena de texto con la codificación dada (por defecto es `utf-8`). +- **`readAsDataURL(blob)`** -- lee los datos binarios y los codifica como [Datos URIs] en base 64 (https://developer.mozilla.org/es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs). +- **`abort()`** -- cancela la operación. -The choice of `read*` method depends on which format we prefer, how we're going to use the data. +La opción del método `read*` depende de qué formato preferimos y cómo vamos a usar los datos. -- `readAsArrayBuffer` -- for binary files, to do low-level binary operations. For high-level operations, like slicing, `File` inherits from `Blob`, so we can call them directly, without reading. -- `readAsText` -- for text files, when we'd like to get a string. -- `readAsDataURL` -- when we'd like to use this data in `src` for `img` or another tag. There's an alternative to reading a file for that, as discussed in chapter : `URL.createObjectURL(file)`. +- `readAsArrayBuffer` -- para archivos binarios, en donde se hacen operaciones binarias de bajo nivel. Para operaciones de alto nivel, como slicing, `File` hereda de `Blob` por lo que podemos llamarlas directamente sin tener que leer. +- `readAsText` -- para archivos de texto, cuando nesecitamos obtener una cadena. +- `readAsDataURL` -- cuando necesitamos usar estos datos como valores de `src` en `img` u otras etiquetas html. Hay otra alternativa para leer archivos de ese tipo como discutimos en el capítulo : `URL.createObjectURL(file)`. -As the reading proceeds, there are events: -- `loadstart` -- loading started. -- `progress` -- occurs during reading. -- `load` -- no errors, reading complete. -- `abort` -- `abort()` called. -- `error` -- error has occurred. -- `loadend` -- reading finished with either success or failure. +Mientras se va realizando la lectura, suceden varios eventos: +- `loadstart` -- la carga comenzó. +- `progress` -- ocurre mientras se lee. +- `load` -- lectura completada, sin errores. +- `abort` -- `abort()` ha sido llamado. +- `error` -- ha ocurrido un error . +- `loadend` -- la lectura finalizó exitosa o no . -When the reading is finished, we can access the result as: -- `reader.result` is the result (if successful) -- `reader.error` is the error (if failed). +Cuando la lectura finaliza, podemos acceder al resultado como: +- `reader.result` el resultado (si fue exitoso) +- `reader.error` el error (si hubo fallo). -The most widely used events are for sure `load` and `error`. +Los mas ampliamente usados son seguramente `load` y `error`. -Here's an example of reading a file: +Un ejemplo de como leer un archivo: ```html run @@ -104,35 +104,35 @@ function readFile(input) { ``` -```smart header="`FileReader` for blobs" -As mentioned in the chapter , `FileReader` can read not just files, but any blobs. +```smart header="`FileReader` para blobs" +Como mencionamos en el capítulo , `FileReader` no solo lee archivos sino también cualquier blob. -We can use it to convert a blob to another format: -- `readAsArrayBuffer(blob)` -- to `ArrayBuffer`, -- `readAsText(blob, [encoding])` -- to string (an alternative to `TextDecoder`), -- `readAsDataURL(blob)` -- to base64 data url. +Podemos usarlo para convertir un blob a otro formato: +- `readAsArrayBuffer(blob)` -- a `ArrayBuffer`, +- `readAsText(blob, [encoding])` -- a una cadena (una alternativa al `TextDecoder`), +- `readAsDataURL(blob)` -- a Datos URI en base 64. ``` -```smart header="`FileReaderSync` is available inside Web Workers" -For Web Workers, there also exists a synchronous variant of `FileReader`, called [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync). +```smart header="`FileReaderSync` está disponible dentro de Web Workers" +Para los Web Workers también existe una variante síncrona de `FileReader` llamada [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync). -Its reading methods `read*` do not generate events, but rather return a result, as regular functions do. +Sus metodos `read*` no generan eventos sino que devuelven un resultado como las funciones regulares. -That's only inside a Web Worker though, because delays in synchronous calls, that are possible while reading from files, in Web Workers are less important. They do not affect the page. +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. ``` -## Summary +## Resumen -`File` objects inherit from `Blob`. +Los objetos `File` heredan de `Blob`. -In addition to `Blob` methods and properties, `File` objects also have `name` and `lastModified` properties, plus the internal ability to read from filesystem. We usually get `File` objects from user input, like `` or Drag'n'Drop events (`ondragend`). +Además de los métodos y propiedades de `Blob`, los objetos `File` también tienen las propiedades `name` y `lastModified` mas la habilidad interna de leer del sistema de archivos. Usualmente obtenemos los objetos `File` mediante la entrada del el usuario con `` o eventos Drag'n'Drop (`ondragend`). -`FileReader` objects can read from a file or a blob, in one of three formats: -- String (`readAsText`). +Los objetos `FileReader` pueden leer desde un archivo o un blob en uno de estos tres formatos: +- String (`readAsText`) . - `ArrayBuffer` (`readAsArrayBuffer`). -- Data url, base-64 encoded (`readAsDataURL`). +- Datos URI codificado en base 64 (`readAsDataURL`). -In many cases though, we don't have to read the file contents. Just as we did with blobs, we can create a short url with `URL.createObjectURL(file)` and assign it to `` or ``. This way the file can be downloaded or shown up as an image, as a part of canvas etc. +En muchos casos no necesitamos leer el contenido de un archivo como hicimos con los blobs, podemos crear un enlace corto con `URL.createObjectURL(file)` y asignárselo a un `` o ``. De esta manera el archivo puede ser descargado, mostrado como una imagen o como parte de un canvas, etc. -And if we're going to send a `File` over a network, that's also easy: network API like `XMLHttpRequest` or `fetch` natively accepts `File` objects. +Y si vamos a mandar un `File` por la red, es fácil utilizando APIs como `XMLHttpRequest` o `fetch` que aceptan nativamente objetos `File` .