formdata-polyfill

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.

README

FormData

A FormData polyfill

npm install formdata-polyfill

Meant to be used with babel, closer-compiler or equivalent (since it's written in es6 using class, WeakMap, Iterators, for...of)

This doesn't monkey patch xhr#send like Rob--W did here. However this provides you a way to convert the entire form to a blob and send it with xhr or fetch.

fd = new FormData(form)
blob = fd._blob()

// Do this...
// important to set correct mimetype
xhr.setRequestHeader('Content-Type', blob.type) // multipart/form-data; boundary=xxx
xhr.send(blob)

xhr.send(fd) // This don't work... Needs to be a native FormData

Another possible solution is to convert the form to a native FormData but then you would lose all the other methods not supported by the original FormData.

fd = new FormData(form)
fd._asNative() // returns a native formData with all the fields

The current status of the native FormData is this

This lib provides you all the function others don't include

• append with filename
• delete(), get(), getAll(), has(), set()
• entries(), keys(), values(), and support of for...of
• Available in web workers (yes, just include it...)

The reason why Rob--W's version didn't work for me was that it only works in web workers due to FileReaderSync beeing used. I did it with constructing new chunks with the blob constructor instead. new Blob([string, blob, file, etc])