title: Problem with sending Image from React to Flask
body: <p>I have The Following <strong>ReactJS+HTML</strong> code :</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from 'react';
  
  export const sendImage = () =&gt; {
    const [image, setImage] = useState();
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault()
      let fileToUpload = image
      const formData = new FormData()
      formData.append('file', fileToUpload)
      
      fetch('/api/upload', {
          method: 'POST',
          headers: {
            'Content-Type': 'multipart/form-data',
            'Accept': 'multipart/form-data'
          },
          body: formData
        }).then(resp =&gt; {
          resp.json().then(data =&gt; {console.log(data)})
        })
      }
  
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>
    return(
      &lt;form onSubmit={handleSubmit} className=&quot;container mt-5 pt-5 pb-5&quot; encType=&quot;multipart/form-data&quot;&gt;
  
        &lt;div className=&quot;form-inline justify-content-center mt-5&quot;&gt;
          &lt;label htmlFor=&quot;image&quot; className=&quot;ml-sm-4 font-weight-bold mr-md-4&quot;&gt;Image : &lt;/label&gt;
          &lt;div className=&quot;input-group&quot;&gt;
            &lt;input onChange={(e) =&gt; {setImage(e.target.files[0])}} type=&quot;file&quot; id=&quot;image&quot; name=&quot;file&quot; accept=&quot;image/*&quot; className=&quot;file-custom&quot;/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div className=&quot;input-group justify-content-center mt-4&quot;&gt;
          &lt;button type=&quot;submit&quot; className=&quot;btn btn-md btn-primary&quot;&gt;Upload...&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
    )
  }
  </code></pre>
  <p>And The Following <strong>Python-Flask</strong> code:</p>
  <pre class="lang-py prettyprint-override"><code>import os
  from flask import Flask, request, render_template
  
  app = Flask(__name__)
  
  
  @app.route('/api/upload', methods=['POST'])
  def handle_form():
      files = request.files
      file = files.get('file')
      &quot;&quot;&quot;
        CODE TO HANDLE FILE
      &quot;&quot;&quot;
      return jsonify({
          'success': True,
          'file': 'Received'
      })
  
  
  @app.route(&quot;/&quot;)
  def index():
      return render_template(&quot;index.html&quot;);   
  
  
  if __name__ == &quot;__main__&quot;:
      app.run(port=8080, debug=True)
  </code></pre>
  <p>The Problem is that when I Submit the form, the file doesn't get sent to the backend.</p>
  <p>Respond when printing files &amp; file from <strong>Python-Flask</strong> :</p>
  <pre class="lang-py prettyprint-override"><code>ImmutableMultiDict([])
  None
  </code></pre>
  <p>How Can I fix This Issue?</p>
  <p><strong>Please Note :</strong></p>
  <p>When I use Plain HTML (non-React based form) It works out perfectly, but when using React based form it doesn't work.</p>