Search code examples
javascripttypescriptinternet-explorerform-datapolyfills

FormData.entries() in Internet Explorer 11?

As found on the official documentation IE11 does not support FormData at all or at least not much enough I need to.

Inside my code I have to loop through the entries of an FormData element. For this task I use the entries() function which is not working on IE giving me the error

Object doesn't support property or method 'entries'

I already added https://github.com/jimmywarting/FormData via npm to my project and added it to my entry in webpack.config.js which then looked something like this.

const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        app: ["babel-polyfill", "formdata-polyfill", "whatwg-fetch", "./Scripts/Modules/index.ts"]
    },
}

In the console I can see that formdata.min.js is loaded. As the error still occurs it seems like it does not use the polyfill as it should. It still uses the default one which fails. How can I tell my TypeScript code to use the polyfill-version instead of the browser's default implementation as the package does not provied any d.ts files?

Is this even possible? If not - what are possible workarounds for such a scenario?

Dev-Tools IE

This is what the FormData object is looking like in the dev-tools:

FormData-object

which only has append as method defined

Solution

  • Not sure if it may helps you but I got this issue today and it seems that the version of the polyfill provided via NPM does not completely override the FormData object, so is not suitable to IE11 or Edge.

    I found switching to the V3 of the library fixed that. In order to do that I got the content of the FormData.js file from the github repository and added it as a component in my own custom JavaScript code.

    I use WebPack to, got some other issues with IE11, still investigating.

    Let me know how it goes by including the content directly instead of getting it from NPM.