Btukfyl

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?

From inside Flask, the files should be accessible using this:

request.files['file']