FormData

FormData.prototype.append

Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist

Syntax

JavaScript
formData.append(name, value, filename?)

Parameters

ParameterTypeDescription
namestringThe name of the field
valuestring | BlobThe field value
filenamestringOptional filename for Blob values

Return Value

undefined

Examples

Basic Usage
const fd = new FormData()
fd.append('name', 'Alice')
fd.append('age', '30')
Practical Example
const fd = new FormData()
const blob = new Blob(['hello'], { type: 'text/plain' })
fd.append('file', blob, 'hello.txt')
Advanced Usage
const input = document.querySelector<HTMLInputElement>('input[type="file"]')!
const fd = new FormData()
if (input.files) {
  for (const file of input.files) {
    fd.append('files', file, file.name)
  }
}

Understanding FormData.prototype.append

The FormData.prototype.append method in JavaScript appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist. It belongs to the FormData object and is one of the most widely used methods for working with formdata values in modern JavaScript and TypeScript applications.

The method signature is formData.append(name, value, filename?). It accepts 3 parameters: name, value, filename. When called, it returns undefined. Understanding when and how to use append() helps you write more expressive, readable code.

Common use cases for FormData.prototype.append include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like fetch-formdata-get, fetch-formdata-set, fetch-formdata-constructor, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for FormData.prototype.append is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.

Browser Compatibility

Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.

Related Methods

FormData.prototype.get

Returns the first value associated with a given key from within a FormData object

FormData.prototype.set

Sets a new value for an existing key, or adds the key/value if it does not already exist, unlike append which adds another value

FormData

Creates a new FormData object optionally pre-populated with the key/value pairs from an HTML form

More FormData Methods

Other methods in the FormData object

FormDataFormData.prototype.getFormData.prototype.getAllFormData.prototype.setFormData.prototype.deleteView all →

Related Tools

All JS MethodsRegex TesterJSON FormatterAPI Request BuilderURL Query ParserEpoch Converter

More FormData Methods

FormData()get()getAll()set()delete()

Explore JavaScript Methods

Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.

ArrayStringObjectMathDatePromiseJSONNumberRegExpMapSetConsoleGlobal / Window