title: how to read multipart/form-data in flask
body: <p>I'm having trouble reading data in flask that is posted via XMLHttpRequest. I'm using this jquery plugin to crop the image and upload to server</p>
  
  <p><a href="https://codecanyon.net/item/slim-image-cropper-responsive-uploading-and-ratio-cropping-plugin/16364167" rel="noreferrer">https://codecanyon.net/item/slim-image-cropper-responsive-uploading-and-ratio-cropping-plugin/16364167</a></p>
  
  <p>data - information about the image is collected and coverted in json before sending it to server using XMLHttpRequest</p>
  
  <pre><code>var formData = new FormData();
  var name = "ex"; // Just an example
  formData.append(name, JSON.stringify(data));
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.send(formData);
  </code></pre>
  
  <p>In my flask code, I print the header of request to see the content type </p>
  
  <pre><code>print(request.headers)
  </code></pre>
  
  <p>And I see this </p>
  
  <pre><code>Accept-Encoding: gzip, deflate
  Accept-Language: en-US,en;q=0.8,sv;q=0.6,fr;q=0.4
  Host: localhost:5000
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundary5e7lMMIQavXzSZg9
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
  Connection: keep-alive
  Content-Length: 62714
  Origin: http://localhost:5000
  Pragma: no-cache
  Cache-Control: no-cache
  Cookie: session=eyJfZnJlc2giOmZhbHNlLCJjc3JmX3Rva2VuIjoiYTJhNTNlYzRkYjZlYzgzNzM2NDQ1ZjM5ZDAxNmY0MTlmY2RiZmRiOCIsInVzZXJuYW1lIjoidXNlcjEifQ.Cv2ADg.d8chDgzAA7fS2P9KcwzRINvLGOU
  Referer: http://localhost:5000/loadProfile
  Accept: */*
  </code></pre>
  
  <p>I cannot read the content using </p>
  
  <blockquote>
    <p>request.get_json()</p>
  </blockquote>
  
  <p>If I try this </p>
  
  <pre><code>print(request.get_json())
  data = request.get_json()
  print(data['name'])
  </code></pre>
  
  <p>TypeError: 'NoneType' object is not subscriptable</p>
  
  <p>In HTTP post request I can see this </p>
  
  <blockquote>
    <p>------WebKitFormBoundary0okhJV9YZK0uArTm
    Content-Disposition: form-data; name="slim[]"
    {"server":[{"status":"SUCCESS"}],"meta":{},"input":{"name":"sample-img.jpg","type":"image/jpeg","size":41319,"width":400,"height":300},"output":{"width":400,"height":300,"image":"data:image/jpeg;base64,/9j/.......</p>
  </blockquote>
  
  <p>According to the author </p>
  
  <p><em>Slim sends data in JSON format (containing base64 encoded images) using a POST request.</em></p>
  
  <p>Format:</p>
  
  <pre><code>{
     "server":null,
     "meta":{
  
     },
     "input":{
        "name":"stars.jpg",
        "type":"image/jpeg",
        "size":null,
        "width":800,
        "height":1200
     },
     "output":{
        "width":150,
        "height":100,
        "image":"data:image/jpeg;base64..."
     },
     "actions":{
        "rotation":0,
        "crop":{
           "x":0,
           "y":333.33333333333337,
           "width":150,
           "height":100.10460251046025,
           "type":"manual"
        },
        "size":null
     }
  }
  </code></pre>
  
  <p>If I do </p>
  
  <pre><code>print(request.form)
  </code></pre>
  
  <p>I can see </p>
  
  <p>ImmutableMultiDict([('slim[]', '{"server":[{"status":"SUCCESS"}],"meta":{},"input":{"name":"sample-img.jpg","type":"image/jpeg","size":41319,"width":400,"height":300},"output":{"width":400,"height":300,"image":"data:image/jpeg;base64,/9j/4AAQ....</p>
  
  <p>But I'm not sure how to read this post data. For e.g get value of name</p>