Why ajax put FormData into request.data instead of request.files? - ajax

Question

Flask, and I want to upload an image file through an AJAX call in HTML.
I wrote this Javascript:
function mysubmit(input){
var file_input = document.getElementById('file-input-left');
var form_data = new FormData();
var file = file_input.files[0];
alert(file);
form_data.append('file', file);
$.ajax({
type: 'POST',
url: '/calc_full_result',
data: form_data,
contentType: false,
cache: false,
processData: false,
async: false,
success: function(data){
alert('Success!');
},
});
}
And the HTML:
<div class="image-holder">
<form action="/calc_full_result" id="upload-form-left" name="form-left" method=post enctype=multipart/form-data>
<div class="image-holder-left">
<div class="image-upload">
{% if img_left %}
<label id="upload-left-label" for="file-input-left"><img id="left-image" src="data:image/png;base64, {{img_left}}"/></label>
{% else %}
<label id="upload-left-label" for="file-input-left"><img id="left-image" src="{{url_for('static', filename='upload_fill.png')}}" /></label>
{% endif %}
<input id="file-input-left" type=file name=file onchange="mysubmit(this)"/>
</div>
</div>
<form action="/calc_full_result" id="upload-form-right" name="form-right" method=post enctype=multipart/form-data>
<div class="image-holder-right">
<div class="image-upload">
{% if img_right %}
<label id="upload-right-label" for="file-input-right"><img id="right-image" src="data:image/png;base64, {{img_right}}"/></label>
{% else %}
<label id="upload-right-label" for="file-input-right"><img id="right-image" src="{{url_for('static', filename='upload_fill.png')}}"/></label>
{% endif %}
<input id="file-input-right" type=file name=file onchange="mysubmit(this)"/>
</div>
</div>
</form>
</div>
Then in app.py:
#app.route('/calc_full_result', methods=['POST'])
def calc_full_result():
if request.method == 'POST':
file = request.files['file']
return jsonify(result="suc")
But I cannot get the object file, it's always empty and cannot be saved. When I check the request I can see len(request.data) is almost the size of image file.
I wonder why request.files is empty and how to save the file in request.data? Is it possible?

Answer 1

Try:
data: new FormData(document.getElementById('upload-form-left'))