I'm trying to send a user uploaded file to my server through an axios POST request with formData and it is not working.
What doesn't work:
const formData = new FormData();
formData.append('batch', batch);
formData.append('file', files[i]);
console.log(formData.get('batch')); // outputs 894489 correctly
console.log(formData.get('file')); // outputs fileObject correctly
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
response from python
print(request.form)
# ImmutableMultiDict([('batch', '894489')])
# Why is the file missing?
What does work:
const formData = new FormData();
formData.append('batch', batch);
formData.append('file', 'test');
console.log(formData.get('batch')); // outputs 894489 correctly
console.log(formData.get('file')); // outputs 'test' correctly
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
response from python
print(request.form)
# ImmutableMultiDict([('batch', '894489'), ('file', 'test')])
# Why is the file appearing?
My files[i] is a valid file and is being recognized in JS. This is confirmed with the console.log(formData.get('file')); which always outputs the correct file.
Somewhere along the way the file is lost and unavailable to python yet strangely if I append a string instead, it works. Any ideas?
