Skip to content

Commit 5fbe4bd

Browse files
committed
minor
1 parent b3e44df commit 5fbe4bd

File tree

1 file changed

+8
-10
lines changed

1 file changed

+8
-10
lines changed

5-network/02-formdata/article.md

+8-10
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ The constructor is:
88
let formData = new FormData([form]);
99
```
1010

11-
If HTML `form` element is provided, it automatically captures its fields.
11+
If HTML `form` element is provided, it automatically captures its fields. As you may have already guessed, `FormData` is an object to store and send form data.
1212

13-
Network methods, such as `fetch` accept `FormData` objects as a body. They are encoded and sent out with `Content-Type: form/multipart`.
14-
15-
So, from the server point of view, that looks like a usual form submission.
13+
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: form/multipart`. So, from the server point of view, that looks like a usual form submission.
1614

1715
## Sending a simple form
1816

@@ -80,7 +78,7 @@ for(let [name, value] of formData) {
8078

8179
## Sending a form with a file
8280

83-
The form is always sent as `Content-Type: form/multipart`. So, `<input type="file">` fields are sent also, similar to a usual form submission.
81+
The form is always sent as `Content-Type: form/multipart`, this encoding allows to send files. So, `<input type="file">` fields are sent also, similar to a usual form submission.
8482

8583
Here's an example with such form:
8684

@@ -109,11 +107,11 @@ Here's an example with such form:
109107
</script>
110108
```
111109

112-
## Sending a form with blob
110+
## Sending a form with Blob data
113111

114-
As we've seen in the chapter <info:fetch>, sending a dynamically generated `Blob`, e.g. an image, is easy. We can supply it directly as `fetch` body.
112+
As we've seen in the chapter <info:fetch>, sending a dynamically generated `Blob`, e.g. an image, is easy. We can supply it directly as `fetch` parameter `body`.
115113

116-
In practice though, it's often more convenient to send an image as a part of the form, with additional fields, such as "name" and other metadata.
114+
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.
117115

118116
Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
119117

@@ -159,11 +157,11 @@ Please note how the image `Blob` is added:
159157
formData.append("image", imageBlob, "image.png");
160158
```
161159

162-
That's same as if there were `<input type="file" name="image">` in the form, and the visitor submitted a file `image.png` from their filesystem.
160+
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) from their filesystem.
163161

164162
## Summary
165163

166-
[FormData](https://xhr.spec.whatwg.org/#interface-formdata) objects are used to read HTML form and submit it using `fetch` or another network method.
164+
[FormData](https://xhr.spec.whatwg.org/#interface-formdata) objects are used to capture HTML form and submit it using `fetch` or another network method.
167165

168166
We can either create `new FormData(form)` from an HTML form, or create an empty object, and then append fields with methods:
169167

0 commit comments

Comments
 (0)