Aug 7, 2020 · Aug 6, 2020 · Aug 6, 2020 · Aug 7, 2020 · Aug 6, 2020 · Aug 6, 2020
diff --git a/5-network/02-formdata/article.md b/5-network/02-formdata/article.md

 # FormData

 This chapter is about sending HTML forms: with or without files, with additional fields and so on.
 Éste capítulo trata sobre el envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares.

 [FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects can help with that. As you might have guessed, it's the object to represent HTML form data.
 Los objetos[FormData](https://xhr.spec.whatwg.org/#interface-formdata)pueden ser de ayuda en esta tarea. Tal como habrás supuesto, éste es el objeto encargado de representar los datos de los formularios HTML.

 The constructoris:
 El constructores:
 ```js
 let formData = new FormData([form]);
 ```

 IfHTML `form` element is provided, it automatically captures its fields.
 Si se le brinda un elementoHTML `form`, el objeto automáticamente capturará sus campos.

 The special thing about`FormData`is that network methods, such as `fetch`,can accept a`FormData`object as a body. It's encoded and sent out with `Content-Type: multipart/form-data`.
 Lo que hace especial al objeto`FormData`es que los métodos de red, tales como `fetch`,pueden aceptar un objeto`FormData`como el cuerpo. Es codificado y enviado como `Content-Type: multipart/form-data`.

 From the server point of view, that looks like a usual form submission.
 Desde el punto de vista del servidor, se ve como una entrega normal.

 ##Sending a simple form
 ##Enviando un formulario simple

 Let's send a simple form first.
 Enviemos un formulario simple.

 As you can see, that's almost one-liner:
 Tal como se puede ver, es prácticamente una línea:

 ```html run autorun
 <form id="formElem">
 </script>
 ```

 In this example, the server code is not presented, as it's beyound our scope. The server accepts thePOSTrequest and replies "User saved".
 En este ejemplo, el código del servidor no es representado ya que está fuera de nuestro alcance. El servidor acepta le solicitudPOSTy responde "Usuario registrado".

 ##FormData Methods
 ##Métodos de FormData

 We can modify fields in`FormData` with methods:
 Contamos con métodos para poder modificar los campos del`FormData`:

 - `formData.append(name, value)` -add a form field with the given`name`and `value`,
 - `formData.append(name, blob, fileName)` -add a field as if it were`<input type="file">`,the third argument `fileName`sets file name (not form field name),as it were a name of the file in user's filesystem,
 - `formData.delete(name)` -remove the field with the given `name`,
 - `formData.get(name)` -get the value of the field with the given `name`,
 - `formData.has(name)` -if there exists a field with the given`name`,returns `true`,otherwise `false`
 - `formData.append(name, value)` -agrega un campo al formulario con el nombre`name`y el valor `value`,
 - `formData.append(name, blob, fileName)` -agrega un campo tal como si se tratara de un`<input type="file">`,el tercer argumento `fileName`establece el nombre del archivo (no el nombre del campo),tal como si se tratara del nombre del archivo en el sistema de archivos del usuario,
 - `formData.delete(name)` -elimina el campo de nombre `name`,
 - `formData.get(name)` -obtiene el valor del campo con el nombre `name`,
 - `formData.has(name)` -en caso de que exista el campo con el nombre`name`,devuelve `true`,de lo contrario `false`

 A form is technically allowed to have many fields with the same`name`,so multiple calls to`append`add more same-named fields.
 Un formulario técnicamente tiene permitido contar con muchos campos con el mismo atributo`name`,por lo que múltiples llamadas a`append`agregarán más campos con el mismo nombre.

 There's also method`set`,with the same syntax as `append`.The difference is that`.set`removes all fields with the given `name`, and then appends a new field. So it makes sure there's only one field with such`name`,the rest is just like `append`:
 Por otra parte existe un método`set`,con la misma sintáxis que `append`.La diferencia está en que`.set`remueve todos los campos con el `name` que se le ha pasado, y luego agrega el nuevo campo. De este modo nos aseguramos de que sólo un campo éxiste con determinado`name`,el resto es tal como en `append`:

 - `formData.set(name, value)`,
 - `formData.set(name, blob, fileName)`.

 Also we can iterate overformDatafields using`for..of` loop:
 También es posible iterar por los campos del objetoformDatautilizando un bucle`for..of`:

 ```js run
 let formData = new FormData();
 formData.append('key1', 'value1');
 formData.append('key2', 'value2');

 //List key/value pairs
 //Se listan los pares clave/valor
 for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1=value1,then key2=value2
  alert(`${name} = ${value}`); // key1=value1,luego key2=value2
 }
 ```

 ##Sending a form with a file
 ##Enviando un formulario con un archivo

 The form is always sent as `Content-Type: multipart/form-data`,this encoding allows to send files. So,`<input type="file">`fields are sent also, similar to a usual form submission.
 El formulario siempre es enviado como `Content-Type: multipart/form-data`,esta codificación permite enviar archivos. Por lo tanto los campos`<input type="file">`también son enviados, tal como sucede en un envío normal.

 Here's an example with such form:
 Aquí un ejemplo con un formulario de este tipo:

 ```html run autorun
 <form id="formElem">
  <input type="text" name="firstName" value="John">
 Picture: <input type="file" name="picture" accept="image/*">
 Imagen: <input type="file" name="picture" accept="image/*">
  <input type="submit">
 </form>

 </script>
 ```

 ##Sending a form with Blob data
 ##Enviando un formulario con datos Blob

 As we've seen in the chapter<info:fetch>,it's easy to send dynamically generated binary data e.g. an image, as `Blob`.We can supply it directly as`fetch`parameter `body`.
 Tal como pudimos ver en el capítulo<info:fetch>,es fácil enviar datos binarios generados dinámicamente (por ejemplo una imagen) como `Blob`.Podemos proporcionarlos directamente en un`fetch`con el parámetro `body`.

 In practice though, it's often convenient to send an image not separately, but as a part of the form, with additional fields, such as "name" and other metadata.
 De todos modos, en la práctica suele ser conveniente enviar la imagen como parte del formulario junto a otra metadata tal como el nombre y no de forma separada.

 Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
 Además los servidores suelen ser más propensos a aceptar formularios multipart, en lugar de datos binarios sin procesar.

 This example submits an image from`<canvas>`, along with some other fields, as a form, using `FormData`:
 Este ejemplo envía una imagen desde un`<canvas>` junto con algunos campos más, como un formulario utilizando `FormData`:

 ```html run autorun height="90"
 <body style="margin:0">
 </body>
 ```

 Please note how the image`Blob`is added:
 Nota como la imagen`Blob`es agregada:

 ```js
 formData.append("image", imageBlob, "image.png");
 ```

 That's same as if there were`<input type="file" name="image">`in the form, and the visitor submitted a file named`"image.png"` (3rd argument) with the data `imageBlob` (2nd argument) from their filesystem.
 Es lo mismo que si hubiera un campo`<input type="file" name="image">`en el formulario, y el usuario enviara un archivo con nombre`"image.png"` (3er argumento) con los datos `imageBlob` (2do argumento) desde su sistema de archivos.

 The server reads formdata and the file, as if it were aregularform submission.
 El servidor lee el formulario `form-data` y el archivo tal como si de un formularioregularse tratara.

 ##Summary
 ##Resumen

 [FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects are used to captureHTMLform and submit it using`fetch`or another network method.
 Los objetos[FormData](https://xhr.spec.whatwg.org/#interface-formdata)son utilizados para capturar un formularioHTMLy enviarlo utilizando`fetch`u otro método de red.

 We can either create`new FormData(form)`from an HTML form, or create a object without a form at all, and then append fields with methods:
 Podemos crear el objeto con`new FormData(form)`desde un formulario HTML, o crearlo sin un formulario en absoluto, y agregar los campos con los siguientes métodos:

 - `formData.append(name, value)`
 - `formData.append(name, blob,fileName)`
 - `formData.set(name, value)`
 - `formData.set(name, blob,fileName)`
 - `formData.append(nombre, valor)`
 - `formData.append(nombre, blob,nombreDeArchivo)`
 - `formData.set(nombre, valor)`
 - `formData.set(nombre, blob,nombreDeArchivo)`

 Let's note two peculiarities here:
 Nótese aquí dos particularidades:

 1.The`set`method removes fields with the same name,`append`doesn't. That's the only difference between them.
 2.To send a file, 3-argument syntax is needed, the last argument is a file name, that normally is taken from user filesystem for `<input type="file">`.
 1.El método`set`remueve campos con el mismo nombre, mientras que`append`no. Esta es la única diferencia entre estos dos métodos.
 2.Para enviar un archivo, se requiere de tres argumentos, el último argumento es el nombre del archivo, el cual normalmente es tomado desde el sistema de archivos del usuario por el `<input type="file">`.

 Other methods are:
 Otros métodos son:

 - `formData.delete(name)`
 - `formData.get(name)`
 - `formData.has(name)`
 - `formData.delete(nombre)`
 - `formData.get(nombre)`
 - `formData.has(nombre)`

 That's it!
 ¡Esto es todo!
diff --git a/5-network/02-formdata/post.view/server.js b/5-network/02-formdata/post.view/server.js

 router.post('/user', async (ctx) => {
  ctx.body = {
    message: "User saved"
    message: "Usuario registrado"
  };
 });

  let files = [];
  const { fields } = await busboy(ctx.req, {
    onFile(fieldname, file, filename, encoding, mimetype) {
      //read all file stream to continue
      //se lee todo el flujo del archivo para continuar
      let length = 0;
      file.on('data', function(data) {
        length += data.length;
  });

  ctx.body = {
    message: `Image saved, firstName: ${fields.firstName},Image size:${files[0].length},fileName: ${files[0].filename}`
    message: `Imagen guardada, nombre: ${fields.firstName},tamaño del archivo:${files[0].length},nombre del archivo: ${files[0].filename}`
  };
 });

  let files = [];
  const { fields } = await busboy(ctx.req, {
    onFile(fieldname, file, filename, encoding, mimetype) {
      //read all file stream to continue
      //se lee todo el flujo del archivo para continuar
      let length = 0;
      file.on('data', function(data) {
        length += data.length;
  });

  ctx.body = {
    message: `User with picture, firstName: ${fields.firstName},picture size:${files[0].length}`
    message: `Usuario con imagen, nombre: ${fields.firstName},tamaño de la imagen:${files[0].length}`
  };
 });
Original file line number	Diff line number	Diff line change
		@@ -1,26 +1,26 @@

		# FormData

		This chapter is about sending HTML forms: with or without files, with additional fields and so on.
		Éste capítulo trata sobre el envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares.

		[FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects can help with that. As you might have guessed, it's the object to represent HTML form data.
		Los objetos[FormData](https://xhr.spec.whatwg.org/#interface-formdata)pueden ser de ayuda en esta tarea. Tal como habrás supuesto, éste es el objeto encargado de representar los datos de los formularios HTML.

		The constructoris:
		El constructores:
		```js
		let formData = new FormData([form]);
		```

		IfHTML `form` element is provided, it automatically captures its fields.
		Si se le brinda un elementoHTML `form`, el objeto automáticamente capturará sus campos.

		The special thing about`FormData`is that network methods, such as `fetch`,can accept a`FormData`object as a body. It's encoded and sent out with `Content-Type: multipart/form-data`.
		Lo que hace especial al objeto`FormData`es que los métodos de red, tales como `fetch`,pueden aceptar un objeto`FormData`como el cuerpo. Es codificado y enviado como `Content-Type: multipart/form-data`.

		From the server point of view, that looks like a usual form submission.
		Desde el punto de vista del servidor, se ve como una entrega normal.

		##Sending a simple form
		##Enviando un formulario simple

		Let's send a simple form first.
		Enviemos un formulario simple.

		As you can see, that's almost one-liner:
		Tal como se puede ver, es prácticamente una línea:

		```html run autorun
		<form id="formElem">
Expand All		@@ -47,48 +47,48 @@ As you can see, that's almost one-liner:
		</script>
		```

		In this example, the server code is not presented, as it's beyound our scope. The server accepts thePOSTrequest and replies "User saved".
		En este ejemplo, el código del servidor no es representado ya que está fuera de nuestro alcance. El servidor acepta le solicitudPOSTy responde "Usuario registrado".

		##FormData Methods
		##Métodos de FormData

		We can modify fields in`FormData` with methods:
		Contamos con métodos para poder modificar los campos del`FormData`:

		- `formData.append(name, value)` -add a form field with the given`name`and `value`,
		- `formData.append(name, blob, fileName)` -add a field as if it were`<input type="file">`,the third argument `fileName`sets file name (not form field name),as it were a name of the file in user's filesystem,
		- `formData.delete(name)` -remove the field with the given `name`,
		- `formData.get(name)` -get the value of the field with the given `name`,
		- `formData.has(name)` -if there exists a field with the given`name`,returns `true`,otherwise `false`
		- `formData.append(name, value)` -agrega un campo al formulario con el nombre`name`y el valor `value`,
		- `formData.append(name, blob, fileName)` -agrega un campo tal como si se tratara de un`<input type="file">`,el tercer argumento `fileName`establece el nombre del archivo (no el nombre del campo),tal como si se tratara del nombre del archivo en el sistema de archivos del usuario,
		- `formData.delete(name)` -elimina el campo de nombre `name`,
		- `formData.get(name)` -obtiene el valor del campo con el nombre `name`,
		- `formData.has(name)` -en caso de que exista el campo con el nombre`name`,devuelve `true`,de lo contrario `false`

		A form is technically allowed to have many fields with the same`name`,so multiple calls to`append`add more same-named fields.
		Un formulario técnicamente tiene permitido contar con muchos campos con el mismo atributo`name`,por lo que múltiples llamadas a`append`agregarán más campos con el mismo nombre.

		There's also method`set`,with the same syntax as `append`.The difference is that`.set`removes all fields with the given `name`, and then appends a new field. So it makes sure there's only one field with such`name`,the rest is just like `append`:
		Por otra parte existe un método`set`,con la misma sintáxis que `append`.La diferencia está en que`.set`remueve todos los campos con el `name` que se le ha pasado, y luego agrega el nuevo campo. De este modo nos aseguramos de que sólo un campo éxiste con determinado`name`,el resto es tal como en `append`:

		- `formData.set(name, value)`,
		- `formData.set(name, blob, fileName)`.

		Also we can iterate overformDatafields using`for..of` loop:
		También es posible iterar por los campos del objetoformDatautilizando un bucle`for..of`:

		```js run
		let formData = new FormData();
		formData.append('key1', 'value1');
		formData.append('key2', 'value2');

		//List key/value pairs
		//Se listan los pares clave/valor
		for(let [name, value] of formData) {
		alert(`${name} = ${value}`); // key1=value1,then key2=value2
		alert(`${name} = ${value}`); // key1=value1,luego key2=value2
		}
		```

		##Sending a form with a file
		##Enviando un formulario con un archivo

		The form is always sent as `Content-Type: multipart/form-data`,this encoding allows to send files. So,`<input type="file">`fields are sent also, similar to a usual form submission.
		El formulario siempre es enviado como `Content-Type: multipart/form-data`,esta codificación permite enviar archivos. Por lo tanto los campos`<input type="file">`también son enviados, tal como sucede en un envío normal.

		Here's an example with such form:
		Aquí un ejemplo con un formulario de este tipo:

		```html run autorun
		<form id="formElem">
		<input type="text" name="firstName" value="John">
		Picture: <input type="file" name="picture" accept="image/*">
		Imagen: <input type="file" name="picture" accept="image/*">
		<input type="submit">
		</form>

Expand All		@@ -110,15 +110,15 @@ Here's an example with such form:
		</script>
		```

		##Sending a form with Blob data
		##Enviando un formulario con datos Blob

		As we've seen in the chapter<info:fetch>,it's easy to send dynamically generated binary data e.g. an image, as `Blob`.We can supply it directly as`fetch`parameter `body`.
		Tal como pudimos ver en el capítulo<info:fetch>,es fácil enviar datos binarios generados dinámicamente (por ejemplo una imagen) como `Blob`.Podemos proporcionarlos directamente en un`fetch`con el parámetro `body`.

		In practice though, it's often convenient to send an image not separately, but as a part of the form, with additional fields, such as "name" and other metadata.
		De todos modos, en la práctica suele ser conveniente enviar la imagen como parte del formulario junto a otra metadata tal como el nombre y no de forma separada.

		Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
		Además los servidores suelen ser más propensos a aceptar formularios multipart, en lugar de datos binarios sin procesar.

		This example submits an image from`<canvas>`, along with some other fields, as a form, using `FormData`:
		Este ejemplo envía una imagen desde un`<canvas>` junto con algunos campos más, como un formulario utilizando `FormData`:

		```html run autorun height="90"
		<body style="margin:0">
Expand DownExpand Up		@@ -154,36 +154,36 @@ This example submits an image from `<canvas>`, along with some other fields, as
		</body>
		```

		Please note how the image`Blob`is added:
		Nota como la imagen`Blob`es agregada:

		```js
		formData.append("image", imageBlob, "image.png");
		```

		That's same as if there were`<input type="file" name="image">`in the form, and the visitor submitted a file named`"image.png"` (3rd argument) with the data `imageBlob` (2nd argument) from their filesystem.
		Es lo mismo que si hubiera un campo`<input type="file" name="image">`en el formulario, y el usuario enviara un archivo con nombre`"image.png"` (3er argumento) con los datos `imageBlob` (2do argumento) desde su sistema de archivos.

		The server reads formdata and the file, as if it were aregularform submission.
		El servidor lee el formulario `form-data` y el archivo tal como si de un formularioregularse tratara.

		##Summary
		##Resumen

		[FormData](https://xhr.spec.whatwg.org/#interface-formdata)objects are used to captureHTMLform and submit it using`fetch`or another network method.
		Los objetos[FormData](https://xhr.spec.whatwg.org/#interface-formdata)son utilizados para capturar un formularioHTMLy enviarlo utilizando`fetch`u otro método de red.

		We can either create`new FormData(form)`from an HTML form, or create a object without a form at all, and then append fields with methods:
		Podemos crear el objeto con`new FormData(form)`desde un formulario HTML, o crearlo sin un formulario en absoluto, y agregar los campos con los siguientes métodos:

		- `formData.append(name, value)`
		- `formData.append(name, blob,fileName)`
		- `formData.set(name, value)`
		- `formData.set(name, blob,fileName)`
		- `formData.append(nombre, valor)`
		- `formData.append(nombre, blob,nombreDeArchivo)`
		- `formData.set(nombre, valor)`
		- `formData.set(nombre, blob,nombreDeArchivo)`

		Let's note two peculiarities here:
		Nótese aquí dos particularidades:

		1.The`set`method removes fields with the same name,`append`doesn't. That's the only difference between them.
		2.To send a file, 3-argument syntax is needed, the last argument is a file name, that normally is taken from user filesystem for `<input type="file">`.
		1.El método`set`remueve campos con el mismo nombre, mientras que`append`no. Esta es la única diferencia entre estos dos métodos.
		2.Para enviar un archivo, se requiere de tres argumentos, el último argumento es el nombre del archivo, el cual normalmente es tomado desde el sistema de archivos del usuario por el `<input type="file">`.

		Other methods are:
		Otros métodos son:

		- `formData.delete(name)`
		- `formData.get(name)`
		- `formData.has(name)`
		- `formData.delete(nombre)`
		- `formData.get(nombre)`
		- `formData.has(nombre)`

		That's it!
		¡Esto es todo!
Copy link Member joaquinelioAug 6, 2020 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. that's all folks! jeje infancia de... mediados del siglo pasado Copy link ContributorAuthor MaskeZenAug 6, 2020 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Pa, que te dí trabajo che... Copy link Member joaquinelioAug 7, 2020 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. @MaskeZen Casi todas las revisiones son así, y ahora vino@maksumi a corregir al corrector jaja el impaciente. Siempre pasa, nuestro cerebro es más inteligente y perezoso que nosotros y es dificil autocorregirnos porque lee lo que cree que debe leer.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,7 @@ let router = new Router();

		router.post('/user', async (ctx) => {
		ctx.body = {
		message: "User saved"
		message: "Usuario registrado"
		};
		});

Expand All		@@ -18,7 +18,7 @@ router.post('/image-form', async (ctx) => {
		let files = [];
		const { fields } = await busboy(ctx.req, {
		onFile(fieldname, file, filename, encoding, mimetype) {
		//read all file stream to continue
		//se lee todo el flujo del archivo para continuar
		let length = 0;
		file.on('data', function(data) {
		length += data.length;
Expand All		@@ -34,7 +34,7 @@ router.post('/image-form', async (ctx) => {
		});

		ctx.body = {
		message: `Image saved, firstName: ${fields.firstName},Image size:${files[0].length},fileName: ${files[0].filename}`
		message: `Imagen guardada, nombre: ${fields.firstName},tamaño del archivo:${files[0].length},nombre del archivo: ${files[0].filename}`
		};
		});

Expand All		@@ -44,7 +44,7 @@ router.post('/user-avatar', async (ctx) => {
		let files = [];
		const { fields } = await busboy(ctx.req, {
		onFile(fieldname, file, filename, encoding, mimetype) {
		//read all file stream to continue
		//se lee todo el flujo del archivo para continuar
		let length = 0;
		file.on('data', function(data) {
		length += data.length;
Expand All		@@ -61,7 +61,7 @@ router.post('/user-avatar', async (ctx) => {
		});

		ctx.body = {
		message: `User with picture, firstName: ${fields.firstName},picture size:${files[0].length}`
		message: `Usuario con imagen, nombre: ${fields.firstName},tamaño de la imagen:${files[0].length}`
		};
		});

Expand Down