FormData: fields and files in a single request

Useful to know

The form can contain text values and a selected file. FormData provides a way for this data to be collected as key pairs and value to send. The object can be used with fetch and other supporting interfaces. Data is presented in the form used by a multipart/form-data. encoding form This is a different task than converting an arbitrary object to JSON: should preserve the relationship between field names and their values, including file content. [1]

FormData can be created from an existing form or filled out programmatically. The append method adds a value to a key, and set sets a value and replaces the corresponding previous values. [1] This distinction matters in fields with more than one choice. For example, several attached images and a name of a material do not describe the same kind of information. Before sending it is useful to have a list of expected names and the allowed number of values for each of them.

Let's imagine a fictional form for sending a photo to a club exhibition. It has a title, a short caption and a file. A successful script can be described as a sequence: selecting a photo, filling in the text, sending and clear confirmation. Then individual cases are added without a file or without a title. Thus, the technical collection of values is associated with the real task, instead of checking only whether the request has left the browser.

When creating from a HTML form, the names of the fields ; FormData uses the named controls that are involved in the collection. Disabled controls are not included in the same way as active ones. [2] This explains why the visible presence of a field is not sufficient evidence that its value has been sent. When diagnosing, the expected list and the actual pairings must be compared. Thus, a missing name differs from a server processing error.

When sending FormData through the browser, the Content-Type should not be manually set for the multipart body. The browser must add the correct border that separates the parts. [2] In a learning example, it is useful to look at the names and types of the parts without publishing personal data or the photos themselves in the diagnostic output. The goal is to understand the structure of the query and the reason the recipient recognizes individual values.

A completed function also needs a clear response after the response. Does the form remain completed in the event of failure? Does the visitor understand what he has to fix? Can it distinguish a successful send-off from an ongoing wait? FormData does not make these decisions, but allows the content of the form to be passed in an appropriate structure. A good implementation combines this mechanism with an accurate contract for the fields and verifiable scenarios for the person who fills them.