how to read multipart/form-data in flask [duplicate]

Question

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

https://codecanyon.net/item/slim-image-cropper-responsive-uploading-and-ratio-cropping-plugin/16364167

data - information about the image is collected and coverted in json before sending it to server using XMLHttpRequest

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);

In my flask code, I print the header of request to see the content type

print(request.headers)

And I see this

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: */*

I cannot read the content using

request.get_json()

If I try this

print(request.get_json())
data = request.get_json()
print(data['name'])

TypeError: 'NoneType' object is not subscriptable

In HTTP post request I can see this

------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/.......

According to the author

Slim sends data in JSON format (containing base64 encoded images) using a POST request.

Format:

{
   "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
   }
}

If I do

print(request.form)

I can see

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....

But I'm not sure how to read this post data. For e.g get value of name

Answer 1

You can use request.form.to_dict() to get result into dictionary form.

Or you can use something like this:

from werkzeug.datastructures import ImmutableMultiDict data = dict(request.form) print data

Answer 2

You are sending form data as key value pairs Try this:

import json
ex = json.loads(request.form.get('ex'))
print ex