What is formdata-polyfill?
The formdata-polyfill npm package provides a polyfill for the FormData Web API, which allows developers to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest or fetch API. It is particularly useful for ensuring compatibility with older browsers that do not support the FormData API natively.
What are formdata-polyfill's main functionalities?
FormData Polyfill
This code checks if the FormData API is not available in the current browser environment and if so, it requires the formdata-polyfill package. After requiring the polyfill, you can use the FormData constructor to create a new FormData object and use the append method to add key/value pairs to it.
if (!window.FormData) {
require('formdata-polyfill');
}
// Now you can use FormData as if the browser supports it natively.
var formData = new FormData();
formData.append('key', 'value');
formData.append('file', fileInput.files[0]);
Sending FormData with fetch
This code demonstrates how to use the formdata-polyfill to send form data using the fetch API. It creates a new FormData object, appends some data to it, and then sends it to a server endpoint using the POST method.
require('formdata-polyfill');
var formData = new FormData();
formData.append('username', 'example');
formData.append('avatar', fileInput.files[0]);
fetch('/submit-form', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error('Error:', error));
Other packages similar to formdata-polyfill
form-data
The 'form-data' npm package is similar to formdata-polyfill in that it allows you to create and submit FormData objects. However, it is designed to be used in a Node.js environment rather than in the browser. It can be particularly useful when you need to simulate form submission from a server-side application.
isomorphic-form-data
The 'isomorphic-form-data' package provides a FormData implementation that works both in the browser and in Node.js environments. This can be useful for code that needs to run in both contexts without changes. It is similar to formdata-polyfill but with the added benefit of being isomorphic.
FormData
npm install formdata-polyfill
A FormData
polyfill
This polyfill conditionally replaces the native implementation rather then fixing the missing functions,
since otherwise there is no way to get or delete existing values in the FormData object.
Therefore this also patches XMLHttpRequest.prototype.send
and fetch
to send the FormData as a blob.
I was unable to patch the Response/Request constructor
so if you are constructing them with FormData you need to call fd._blob()
manually.
new Request(url, {
method: 'post',
body: fd._blob ? fd._blob() : fd
})
Dependencies
The internal data is kept private to prevent unintentional access to it,
therefore WeakMap
is used and you may also need a polyfill for that.
Updating from 2.x to 3.x
Previously you had to import the polyfill and use that,
since it didn't replace the global (existing) FormData implementation.
But now it transparently calls _blob()
for you when you are sending something with fetch or XHR,
by way of monkey-patching the XMLHttpRequest.prototype.send
and fetch
functions.
So you maybe had something like this:
var FormData = require('formdata-polyfill')
var fd = new FormData(form)
xhr.send(fd._blob())
There is no longer anything exported from the module
(though you of course still need to import it to install the polyfill),
so you can now use the FormData object as normal:
require('formdata-polyfill')
var fd = new FormData(form)
xhr.send(fd)
The status of the native FormData (2016-10-19) is:
This polyfill normalizes support for the FormData API:
append
with filenamedelete()
, get()
, getAll()
, has()
, set()
entries()
, keys()
, values()
, and support for for...of
- Available in web workers (just include the polyfill)