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