Repository navigation
FormData - #335
Merged
Merged
FormData#335
Conversation
|
|
joaquinelio
requested changes
Aug 6, 2020
| 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 vé como una entrega normal. |
Member
There was a problem hiding this comment.
Suggested change
| Desde el punto de vista del servidor, se vé como una entrega normal. | |
| Desde el punto de vista del servidor, se ve como una entrega normal. |
| - `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)` - remove el campo de nombre `name`, |
Member
There was a problem hiding this comment.
Suggested change
| - `formData.delete(name)` - remove el campo de nombre `name`, | |
| - `formData.delete(name)` - elimina el campo de nombre `name`, |
| - `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)` - remove 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`, retorna `true`, de lo contrario `false` |
Member
There was a problem hiding this comment.
Solemos traducir "devuelve"
"retorna" está bien, pero por consistencia con el resto de los art preferimos devuelve
Suggested change
| - `formData.has(name)` - en caso de que exista el campo con el nombre `name`, retorna `true`, de lo contrario `false` | |
| - `formData.has(name)` - en caso de que exista el campo con el nombre `name`, devuelve `true`, de lo contrario `false` |
| <form id="formElem"> | ||
| <input type="text" name="name" value="John"> | ||
| <input type="text" name="surname" value="Smith"> | ||
| <input type="text" name="nombre" value="John"> |
Member
There was a problem hiding this comment.
Solamente como nota:
No traducimos nombres de variables, htm clases o id,
(incluso debemos ser cuidadosos al traducir contenido entre comillas)
en HTML ' name="xxx" ', xxx es un nombre referenciable por codigo como "class="
Lo dejamos a criterio del traductor, pero recomendamos cuidado y probarlo la página con un server local.
En este caso no importa porque es un ej y no se referencia en todo el articulo,
lo comento para futuras traducciones
| 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 cómo en `append`: |
Member
There was a problem hiding this comment.
Suggested change
| 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 cómo en `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`: |
| ## 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 ej. una imagen, como `Blob`. Podemos simplemente proporcionarla a `fetch` como un parametro en el `body`. |
Member
There was a problem hiding this comment.
La norma de las comas encerrando un bloque.
No sé por qué el ruso se enrosca tanto explicando, fetch('ruta imagen ', { method: 'POST' , body: blob }
Tal como pudimos ver en el capítulo info:fetch, es fácil enviar datos binarios generados dinámicamente, por ej. una imagen, como Blob. Podemos proporcionarlos directamente a un fetch con el parámetro body.
Cambié de opinión. Creo que es más facil de leer.
Suggested change
| Tal como pudimos ver en el capítulo <info:fetch>, es fácil enviar datos binarios generados dinámicamente ej. una imagen, como `Blob`. Podemos simplemente proporcionarla a `fetch` como un parametro en el `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`. |
| ``` | ||
|
|
||
| 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. | ||
| Se obtiene el mismo resultado tal como si se tuviese 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. |
Member
There was a problem hiding this comment.
Medio denso... ¿puedo? El original es mas corto, si te parece:
(Aunque tampoco me gusta el original, lo haría más esquemático menos verboso )
Suggested change
| Se obtiene el mismo resultado tal como si se tuviese 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. | |
| 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. |
Collaborator
There was a problem hiding this comment.
No olvides el exceso de comas @joaquinelio, jajajaja
Member
There was a problem hiding this comment.
Debí quitar esa coma delante de la "y"... @maksumi
No recuerdo si la noté, pero queda demasiado largo.
De acuerdo, la coma NO marca pausas al lector sino estructura, habría que reescribirlo.
Ni se me ocurre hacerlo. Good enough.
| [FormData](https://xhr.spec.whatwg.org/#interface-formdata) objetos utilizados para capturar un formulario HTML y 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 de este modo utilizar `new FormData(form)` tal que from es un elemento formulario HTML, o crear un objeto sin un formulario en absoluto, y agregar los campos con los siguientes métodos: |
Member
There was a problem hiding this comment.
Es inconsistente en el original pero en ingles se disimula porque usa el new como parte de la explicación.
Suggested change
| Podemos de este modo utilizar `new FormData(form)` tal que from es un elemento formulario HTML, o crear un objeto sin un formulario en absoluto, y agregar los campos con los siguientes métodos: | |
| 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: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Podemos de este modo utilizar `new FormData(form)` tal que from es un elemento formulario HTML, o crear un objeto sin un formulario en absoluto, y agregar los campos con los siguientes métodos: | |
| 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: |
Lo que dijo @joaquinelio pero sin ese espacio
|
|
||
| 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 metodos. |
Member
There was a problem hiding this comment.
Suggested change
| 1. El método `set` remueve campos con el mismo nombre, mientras que `append` no. Esta es la única diferencia entre estos dos metodos. | |
| 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. |
| - `formData.has(nombre)` | ||
|
|
||
| That's it! | ||
| ¡Esto es todo! |
Member
There was a problem hiding this comment.
that's all folks!
jeje
infancia de... mediados del siglo pasado
Contributor
Author
There was a problem hiding this comment.
Pa, que te dí trabajo che...
Member
|
Please make the requested changes. After it, add a comment "/done". |
maksumi
reviewed
Aug 6, 2020
maksumi
left a comment
maksumi
left a comment
Collaborator
There was a problem hiding this comment.
Excelente traducción, algunas sugerencias a tomar en cuenta, otras como una alternativa solamente y unos cuantos typos a corregir
| # FormData | ||
|
|
||
| This chapter is about sending HTML forms: with or without files, with additional fields and so on. | ||
| Éste capítulo se trata del envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Éste capítulo se trata del envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares. | |
| Éste capítulo trata sobre el envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares. |
#Opcional
| Desde el punto de vista del servidor, se vé como una entrega normal. | ||
|
|
||
| ## Sending a simple form | ||
| ## Enviando un simple formulario |
Collaborator
There was a problem hiding this comment.
Suggested change
| ## Enviando un simple formulario | |
| ## Enviando un formulario simple |
Sugiero el adjetivo calificativo después, tal como lo haces en la linea 21, ya que guarda más sentido en la definición del tipo de formulario y no parece centrarse en el valor de este mismo.
| <form id="formElem"> | ||
| <input type="text" name="name" value="John"> | ||
| <input type="text" name="surname" value="Smith"> | ||
| <input type="text" name="nombre" value="John"> |
| # FormData | ||
|
|
||
| This chapter is about sending HTML forms: with or without files, with additional fields and so on. | ||
| Éste capítulo se trata del envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Éste capítulo se trata del envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares. | |
| Éste capítulo trata sobre el envío de formularios HTML: con o sin archivos, con campos adicionales y cosas similares. |
Opcional
| Desde el punto de vista del servidor, se vé como una entrega normal. | ||
|
|
||
| ## Sending a simple form | ||
| ## Enviando un simple formulario |
Collaborator
There was a problem hiding this comment.
Suggested change
| ## Enviando un simple formulario | |
| ## Enviando un formulario simple |
Sugiero el calificativo al final, tal como lo haces con la linea 21, para una mejor referencia al tipo de formulario y no el valor que tiene
| ``` | ||
|
|
||
| Please note how the image `Blob` is added: | ||
| Note como la imagen `Blob` es agregada: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Note como la imagen `Blob` es agregada: | |
| Nota como la imagen `Blob` es agregada: |
Anteriormente empezaste usando lenguaje informal así que sería bueno conservar el estilo
| ``` | ||
|
|
||
| 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. | ||
| Se obtiene el mismo resultado tal como si se tuviese 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Se obtiene el mismo resultado tal como si se tuviese 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. | |
| 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. |
| ``` | ||
|
|
||
| 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. | ||
| Se obtiene el mismo resultado tal como si se tuviese 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. |
Collaborator
There was a problem hiding this comment.
No olvides el exceso de comas @joaquinelio, jajajaja
| ## Resumen | ||
|
|
||
| [FormData](https://xhr.spec.whatwg.org/#interface-formdata) objects are used to capture HTML form and submit it using `fetch` or another network method. | ||
| [FormData](https://xhr.spec.whatwg.org/#interface-formdata) objetos utilizados para capturar un formulario HTML y enviarlo utilizando `fetch` u otro método de red. |
Collaborator
There was a problem hiding this comment.
Suggested change
| [FormData](https://xhr.spec.whatwg.org/#interface-formdata) objetos utilizados para capturar un formulario HTML y enviarlo utilizando `fetch` u otro método de red. | |
| Los objetos [FormData](https://xhr.spec.whatwg.org/#interface-formdata) son utilizados para capturar un formulario HTML y enviarlo utilizando `fetch` u otro método de red. |
| [FormData](https://xhr.spec.whatwg.org/#interface-formdata) objetos utilizados para capturar un formulario HTML y 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 de este modo utilizar `new FormData(form)` tal que from es un elemento formulario HTML, o crear un objeto sin un formulario en absoluto, y agregar los campos con los siguientes métodos: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Podemos de este modo utilizar `new FormData(form)` tal que from es un elemento formulario HTML, o crear un objeto sin un formulario en absoluto, y agregar los campos con los siguientes métodos: | |
| 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: |
Lo que dijo @joaquinelio pero sin ese espacio
Contributor
Author
|
/done |
maksumi
reviewed
Aug 6, 2020
maksumi
left a comment
maksumi
left a comment
Collaborator
There was a problem hiding this comment.
Falta corregir unos puntos señalados por Joaquin, los cuáles he argumentado o simplemente señalado con un like. Una vez corregidos, ¡approve!
| ## 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 campos, `<input type="file">` también son enviados, tal como sucede en un envío normal. |
| El formulario siempre es enviado como `Content-Type: multipart/form-data`, Esta codificación permite enviar archivos. Por lo tanto 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 éste tipo: |
Collaborator
There was a problem hiding this comment.
La RAE recomienda dejar de usar la tilde en pronombres demostrativos como este... Así que, igual, tómalo e cuenta.
@MazkeZen
Contributor
Author
|
Bien, se me habían pasado, creo que ahora sí está todo. |
maksumi
approved these changes
Aug 7, 2020
Collaborator
|
That's all! |
|
Thank you 💖 I updated the Progress Issue #17 🎉 🎉 🎉 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.