Sending image file and data in one post request - reactjs

Question

I'm trying to send image file and data in one post request with axios:
const fd = new FormData();
fd.append("image", selectedFile, selectedFile.name);
let data = {
category: category,
title: title,
post: text,
image: fd
};
//console.log(fd);
const headers = {
"Content-Type": "multipart/form-data"
};
const url = "http://localhost:5000/blog/posts";
axios
.post(url, fd, headers)
.then(resp => { ...
Flask back-end:
image = request.files['image']
category = request.files['category']
title = request.files['title']
post = request.files['post']
log output:
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'category'
What am I doing wrong ?

Answer 1

You use a FormData object which is transmitted as "multipart/formdata". In other words, in multiple parts of data that are transmitted in individual sections of a broadcast.
Use the FormData object for all data that you want to transfer. Add the data as entries to the FormData object.
const fd = new FormData();
fd.append ("image", selectedFile, selectedFile.name);
fd.append("category", category);
// ...
The different types of data and files can be reached within the route in a different way from the request object.
Use request.form in your route for all entries that do not represent a file.
image = request.files['image']
category = request.form['category']
# ...
Possibly use .get(key[, ...]) to bypass the KeyError and get None if the data is not available or to pass a default value.
category = request.form.get('category', 'Uncategorized')

Answer 2

You create a data object, but don't seem to do anything with it. If you're using FormData, you should append all your data points to it. So your code should look something like this:
const fd = new FormData();
fd.append("image", selectedFile, selectedFile.name);
fd.append("category", category);
fd.append("title", title);
...
Then you can just post it the way you post it:
axios
.post(url, fd, headers)
.then(resp => { ...