I encountered an issue with my code that involves allowing users to upload multiple images. Whenever a user uploads pictures and a request is sent to the server, I keep getting a 500 error code.
Here's the snippet of the problematic code:
ChangeImages(images) {
this.images = images;
console.log("imagesEmit", this.images);
console.log(this.step);
console.log("images", images);
console.log("thishome", this.home);
const formData = new FormData();
let id = this.homeId;
formData.append(
"data",
JSON.stringify({ file: this.images[0], position: 1 })
);
console.log(formData);
axios
.post(`/api/upload-home-picture/${id}`, formData, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((response) => {
this.home.images[0].push(response.data);
});
}The issue arises when sending the request within a listener. Here are the results from the console logs:
this.images:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABsoA…wD3k6myVTczaWMZ5Ebv8P2lNvc037YOAAAAAASUVORK5CYII="this.home:
funding_round_end: (...)
funding_round_start: (...)
funding_round_time: (...)
hpi_zip_avg_appreciation: (...)
id: (...)
images: (...)
info: (...)
interest: (...)
invest_now: (...) Additionally, here's the payload:
{"images":"data:image/png;base64,And the backend code snippet:
@bp.route('/upload-home-picture', methods=['POST'])
@login_required
def upload_home_picture():
# TODO test permission
data = json.loads(request.form['data'])
home_id = data['home']
home = UserHome.query.get(home_id)
url = _upload_file()
db.session.add(UserHomeImage(url=url, home=home, pos=0))
db.session.commit()
result = dict(url=url, pos=0)
return jsonify(result)