How to get IE 11 not support FormData in ReactJS. FormData.get() not supported
<p>The code works fine on <code>FF</code> and <code>Chrome</code> but will not run on <code>IE</code>.</p>

<p>I read that I need to add another meta tag to the index.html but this did not solve the issue.  Does IE not support FormData?  I can update the state to store the name directly in the dropHandler method but want to know why FormData does not work for IE.</p>

<pre><code>    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
</code></pre>

<p>Error:</p>

<pre><code>SCRIPT438: Object doesn't support property or method 'get'
</code></pre>

<p>Code that causes error:</p>

<pre><code>this.state.jsonFile.get('name')
</code></pre>

<p>React Component:</p>

<pre><code>'use strict';

const React = require('react');
const ReactDOM = require('react-dom');


class TestCaseDialog extends React.Component {

  constructor(props) {
    super(props);
    this.state = {jsonFile: null, loadingPage: false, loadingMessage: '', errorAlertVisible: false, errorAlertMessage: '', filePath: null};
    this.dropHandler = this.dropHandler.bind(this);
  }


  dropHandler(file) {

    var jsonFile = new FormData();
    jsonFile.append('file', file[0]);
    jsonFile.append('name', file[0].name);

    ..... 

    this.setState({jsonFile: jsonFile,
                       filePath: resp.text});

  }

  render() {

   ...
       dropZone.push = &lt;div key='file-details'&gt;File has been uploaded: {this.state.jsonFile.get('name')}&lt;/div&gt;;
   ...

    return (
      &lt;div&gt;
         {this.state.loadingPage ? &lt;LoadingPage key='loadingPage' loadingMessage={this.state.loadingMessage} /&gt; : (
           &lt;div key="dz"&gt;
             {dropZone}
           &lt;/div&gt;
         )}
         {errorAlert}
       &lt;/div&gt;
     );
  }
}

module.exports = TestCaseDialog
</code></pre>

<p>index.html</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns:th="http://www.thymeleaf.org"&gt;
&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"/&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;!-- cerulean style --&gt;
    &lt;!--link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css" /--&gt;
    &lt;!--link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap-theme.min.css" /--&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" /&gt;
    &lt;!-- Optional theme --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" /&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" /&gt;
    &lt;link rel="stylesheet" href="/main.css" /&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;!--div&gt;
      &lt;Logged in as: &lt;span th:text="${#authentication.name}"&gt;user&lt;/span&gt;.
      &lt;form th:action="@{/logout}" method="post"&gt;
          &lt;input type="submit" value="Log Out"/&gt;
      &lt;/form&gt;
    &lt;/div--&gt;
    &lt;div id="react"&gt;&lt;/div&gt;

    &lt;script src="built/bundle.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>