Overview
The FormData object provides a way to construct a set of key-value pairs representing form fields and their values.
Example code
<form id="example-form">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter name" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter address" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter password" />
</div>
<div>
<label for="file">Image:</label>
<input type="file" id="file" name="file" placeholder="Enter email" />
</div>
<div>
<button type="submit" id="submit">Submit</button>
</div>
</form>
This article explains FormData object together with above HTML code.
Use with HTML form element
const exampleForm = document.getElementById('example-form')
const formData = new FormData(exampleForm)
FormData Object automatically read all fields in HTML form element.
Use without HTML form element
const name = document.getElementById('name')
const email = document.getElementById('email')
const password = document.getElementById('password')
const file = document.getElementById('file')
const formData = new FormData()
formData.append('name', name.value)
formData.append('email', email.value)
formData.append('password', password.value)
formData.append('file', file.files[0], file.files[0].name)
formData.append('isNotAuto', '1')
Declare an empty FormData object. Fill the key-values by using its method append which will be explained at next section.
Method
FormData Object provides many useful methods.
append(key, value)
Add a new key-value pair to FormData object.
formData.append('name', 'my awesome name')
append(key, blob, fileName)
Add a new key-value pair to FormData object. This method is used for file. The third argument takes name of file. It will be a binary type.
formData.append('file', file.files[0], fi le.files[0].name)
delete(key)
Remove the specific field by key.
formData.delete('name')
get(key)
Get the first value within a FormData object by key.
If there is no value by key, it returns ''.
If there is no field by key, it returns null.
formData.get('name')
getAll(key)
It returns array of values whose key matches the specific key. Otherwise, an empty list
formData.append('name', 'name 1')
formData.append('name', 'name 2')
formData.getAll('name') // Returns ["name 1", "name 2"]
has(key)
if there exists a field by key, returns true, otherwise false.
formData.has('name')
set(key, value)
Set a new value for an existing key inside a FromData object. If there is no key, add a key-value pair to FormData object.
formData.has('name', 'my new name')
set(key, blob, fileName)
Set a new value for an existing key inside a FromData object. If there is no key, add a key-value pair to FormData object.
The third argument takes name of file. It will be a binary type.
formData.append('file', file.files[0], file.files[0].name)
Send FormData Object via Fetch
const response = await fetch('/api/example', {
method: 'POST',
body: formData
})
const result = await response.json()
console.log(result)
The form is always sent as Content-Type: multipart/form-data which can be seen in Header. It is an encoding which allows to send files.
const response = await fetch('/api/example', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
body: formData
})
const result = await response.json()
console.log(result)
If you would like to add Content-type explicitly, add Content-Type: multipart/form-data into Header.