1 | # FormData
|
2 |
|
3 | [![Greenkeeper badge](https://badges.greenkeeper.io/jimmywarting/FormData.svg)](https://greenkeeper.io/)
|
4 |
|
5 | [![Build Status](https://travis-ci.org/jimmywarting/FormData.svg?branch=master)](https://travis-ci.org/jimmywarting/FormData)
|
6 |
|
7 | [![npm version][npm-image]][npm-url]
|
8 |
|
9 | ```bash
|
10 | npm install formdata-polyfill
|
11 | ```
|
12 |
|
13 | A `FormData` polyfill
|
14 |
|
15 | This polyfill conditionally replaces the native implementation rather then fixing the missing functions,
|
16 | since otherwise there is no way to get or delete existing values in the FormData object.
|
17 | Therefore this also patches `XMLHttpRequest.prototype.send` and `fetch` to send the FormData as a blob.
|
18 |
|
19 | I was unable to patch the Response/Request constructor
|
20 | so if you are constructing them with FormData you need to call `fd._blob()` manually.
|
21 |
|
22 | ```js
|
23 | new Request(url, {
|
24 | method: 'post',
|
25 | body: fd._blob ? fd.blob() : fd
|
26 | })
|
27 | ```
|
28 |
|
29 | Dependencies
|
30 | ---
|
31 |
|
32 | The internal data is kept private to prevent unintentional access to it,
|
33 | therefore `WeakMap` is used and you may also need a polyfill for that.
|
34 |
|
35 | Updating from 2.x to 3.x
|
36 | ---
|
37 |
|
38 | Previously you had to import the polyfill and use that,
|
39 | since it didn't replace the global (existing) FormData implementation.
|
40 | But now it transparently calls `_blob()` for you when you are sending something with fetch or XHR,
|
41 | by way of monkey-patching the `XMLHttpRequest.prototype.send` and `fetch` functions.
|
42 |
|
43 | So you maybe had something like this:
|
44 |
|
45 | ```javascript
|
46 | var FormData = require('formdata-polyfill')
|
47 | var fd = new FormData(form)
|
48 | xhr.send(fd._blob())
|
49 | ```
|
50 |
|
51 | There is no longer anything exported from the module
|
52 | (though you of course still need to import it to install the polyfill),
|
53 | so you can now use the FormData object as normal:
|
54 |
|
55 | ```javascript
|
56 | require('formdata-polyfill')
|
57 | var fd = new FormData(form)
|
58 | xhr.send(fd)
|
59 | ```
|
60 |
|
61 | The status of the native FormData (2016-10-19) is:
|
62 | [![skarmavbild 2016-10-19 kl 21 32 19](https://cloud.githubusercontent.com/assets/1148376/19534352/b7f42d8c-9643-11e6-91da-7f89580f51d8.png)](https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility)
|
63 |
|
64 | This polyfill normalizes support for the FormData API:
|
65 |
|
66 | - `append` with filename
|
67 | - `delete()`, `get()`, `getAll()`, `has()`, `set()`
|
68 | - `entries()`, `keys()`, `values()`, and support for `for...of`
|
69 | - Available in web workers (just include the polyfill)
|
70 |
|
71 | [npm-image]: https://img.shields.io/npm/v/formdata-polyfill.svg
|
72 | [npm-url]: https://www.npmjs.com/package/formdata-polyfill
|