formdata's Introduction

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)
xhr.send(fd._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

If you wish to monkey patch XHR to make it work out of the box then you have to do it yourself

import FormData from 'formdata-polyfill'

XMLHttpRequest = class extends XMLHttpRequest {
  send(data) {
    super.send(data instanceof FormData ? data._blob() : data)
  }
}

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])

Recommend Projects