You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/02-formdata/article.md
+8-10
Original file line number
Diff line number
Diff line change
@@ -8,11 +8,9 @@ The constructor is:
8
8
let formData =newFormData([form]);
9
9
```
10
10
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.
12
12
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.
16
14
17
15
## Sending a simple form
18
16
@@ -80,7 +78,7 @@ for(let [name, value] of formData) {
80
78
81
79
## Sending a form with a file
82
80
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.
84
82
85
83
Here's an example with such form:
86
84
@@ -109,11 +107,11 @@ Here's an example with such form:
109
107
</script>
110
108
```
111
109
112
-
## Sending a form with blob
110
+
## Sending a form with Blob data
113
111
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`.
115
113
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.
117
115
118
116
Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.
119
117
@@ -159,11 +157,11 @@ Please note how the image `Blob` is added:
159
157
formData.append("image", imageBlob, "image.png");
160
158
```
161
159
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.
163
161
164
162
## Summary
165
163
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.
167
165
168
166
We can either create `new FormData(form)` from an HTML form, or create an empty object, and then append fields with methods:
0 commit comments