title: Python flask upload file using ajax request.files empty
body: <p>I am trying to upload an image about 1.62MB to an end point written using flask. the request.files object is always empty. I've checked the following questions but no luck:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/50108907/flask-request-files-is-empty">Flask request.files is empty</a></li>
  <li><a href="https://github.com/requests/requests/issues/2505" rel="nofollow noreferrer">https://github.com/requests/requests/issues/2505</a></li>
  <li><a href="https://stackoverflow.com/questions/18334717/how-to-upload-a-file-using-an-ajax-call-in-flask">How to upload a file using an ajax call in flask</a></li>
  </ul>
  
  <p>here is my server:</p>
  
  <pre><code>from flask import Flask, request, jsonify, render_template
  import sys
  
  app = Flask(__name__)
  app.config['UPLOAD_FOLDER'] = r"C:\Temp"
  app.debug = True
  
  @app.route("/demo-upload", methods=["GET", "POST"])
  def ProcessImage():
      if request.method == "POST":
          print(request.files)
          try:
              if 'file' in request.files:
                  with open("test-upload.png", "wb") as iFile:
                      print(request['file'])
                      iFile.write(request.files['file'])
          except Exception as e:
              print(e)
          return jsonify("Ok")
  
  @app.route("/", methods=["GET"])
  def DemoIndexPage():
      return render_template("index.html")
  
  if __name__ == "__main__":
      app.run()
  </code></pre>
  
  <p>my client:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"
              integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
              crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;title&gt;Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 style="text-align: center"&gt;Status Demo&lt;/h1&gt;
      &lt;span&gt;upload image to process.&lt;/span&gt;&lt;br/&gt;
          &lt;form id="FileForm" name="file" enctype="multipart/form-data"&gt;
              &lt;input type="file" name="file" id="File" /&gt;
              &lt;input type="button" name="submit" value="submit" onclick="ProcessImage()" /&gt;
          &lt;/form&gt;
      &lt;p id="status" hidden&gt;Success!&lt;/p&gt;
      &lt;script&gt;
          function ProcessImage()
          {
              var form_data = new FormData($('#File')[0]);
              console.log(form_data)
              $.ajax({
                  type: 'POST',
                  url: '/demo-upload',
                  data: form_data,
                  contentType: false,
                  cache: false,
                  processData: false,
                  async: false,
                  success: function (data) {
                      console.log('Success!');
                      $("#status").show();
                  },
              });
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>everything looks clean to me and I do not know where I am going wrong. the files attribute in the request object is always empty. I also tried with postman using post request with form-data key = file and value = uploaded a file, and a header content-type = "multipart/form-data". any help is appreciated thanks a lot!</p>