reactjs - React: FormData not sending image data to Flask backend

Question

I am trying to upload an image, but the form data simply doesn't append the file data to my request.

Front end:

const form = new FormData()
form.append('files[]', file)
form.append("woor","w")
console.log(file)
const header = {
     headers: { 'Content-Type': 'multipart/form-data'}
}
axios.post(
   action,
   form,
   header
).then(({ data: response }) => {})

Flask backend:

def upload():
    print(request.form)
    print(request.json)    
    return {"body":[{"value":"fdd", "label":"fdaad"}]}

The backend prints out ImmutableMultiDict([('woor', 'w')]) but not the file, console.log does show the file data I have also tried {"file":file} and {"file[]":file}

EDIT: file is not an array. It looks like a dict to me from console.log()

question from:https://stackoverflow.com/questions/65896539/react-formdata-not-sending-image-data-to-flask-backend

Answer 1

I recently came across the same Issue, the answer might be suprisingly simple, you access the file with request.files instead of request.form in flask.
Here is also a link to the SO question where I had the same Issue, figured it out after a few days: Dropzone.js not sending the file when adding additional data