Discover the functionality of the FormData object and learn how to effectively utilize it.

The FormData object serves as a storage mechanism for preserving input field values within a form. It is particularly beneficial when you need to transmit files to a server. This object is typically only utilized in such circumstances.

To demonstrate the utilization of FormData in sending file content via fetch, consider the following example:

<input type="file" id="fileUpload" />

Here, an input field of type “file” is presented. An event listener is attached to the input field, specifically to the “change” event, as shown below:

document.querySelector('#fileUpload').addEventListener('change', event => {
 handleImageUpload(event)
})

The majority of the logic is then managed within the handleImageUpload() function:

const handleImageUpload = event => {
 const files = event.target.files
 const formData = new FormData()
 formData.append('myFile', files[0])

 fetch('/saveImage', {
 method: 'POST',
 body: formData
 })
 .then(response => response.json())
 .then(data => {
 console.log(data)
 })
 .catch(error => {
 console.error(error)
 })
}

In this particular example, a POST request is carried out to the /saveImage endpoint. It is possible to send additional data by appending it to the formData object. To access the file data on the server-side, it is imperative to parse the request as a multipart form. For more insight on this, refer to the guide on how to upload files in a Next.js form.

The FormData object provides various useful methods, including:

  • append(): This method adds a value to the object with a specified key. If the key already exists, the new value appends to the existing one.
  • delete(): By implementing this method, you can delete a particular key-value pair.
  • entries(): It returns an Iterator object that allows you to iterate over and list the key-value pairs contained within the object.
  • get(): When invoked, this method retrieves the value associated with a specified key. If multiple values were appended, it returns the first one.
  • getAll(): With this method, you can retrieve all values associated with a specific key.
  • has(): Typically, this method returns a boolean value indicating whether a particular key exists within the object.
  • keys(): It returns an Iterator object that enables iteration and listing of the keys within the object.
  • set(): This method adds a value to the object with the specified key. In the case where the key already exists, the existing value gets replaced.
  • values(): It returns an Iterator object that facilitates iteration and listing of the values within the object.

The FormData object is a component of the XMLHttpRequest 2 specification and is supported by all modern browsers. It is most commonly used for sending images via fetch. For guidance on how to handle server-side image uploads, refer to the guide on how to handle file uploads in Node.js.