I’ve seen many similar questions and yet none have the answer to my problem. I try to send a file through AJAX to my flask app and i only get an empty ImmutableMultiDict([]) with the flask request.files object what am i doing wrong?
Here is my form;
<form id="edit_form" action='' method='POST' enctype='multipart/form-data'>
<input type='file' id='image_field' name="image">
<fieldset>
<label for="title_en">Title EN:</label>
<input type="text" id="title_en" name="title_en">
</fieldset>
<fieldset>
<label for="title_fr">Title FR:</label>
<input type="text" id="title_fr" name="title_fr">
</fieldset>
</form>
my JS;
var form_data = new FormData();
form_data.append("file", $("#edit_form #image_field")[0]);
console.log(form_data);
var id = document.querySelector("#edit_form").getAttribute("product_id");
form_data.append("id", id);
$.ajax({
type: 'POST',
url: '/api/add_product_image',
data: form_data,
contentType: multipart/form-data,
success: function(data) {
console.log('Success!');
// put up image in preview
},
});
and my python code;
@app.route('/api/add_product_image', methods=['POST'])
def add_product_image():
if request.method == 'POST':
# retreive from form data
print(request.form)
try:
id = request.form["id"]
print(request.files)
file = request.files.get("file")
file.save("./static/imgs/"+id+".png")
return {"status": "success"}
except Exception as e:
print(e)
return {"status": "error", "message": ""}