Cannot upload file within FormData
Problem
Describe the bug After upgrading from 0.24.0 to 0.25.0 File Form upload breaks. To Reproduce Original working on 0.24.0 code. [code block] This code was working previously, but now backend cannot extract file field. After specifying content type: [code block] I got an error on backend "bad content-type header, no multipart boundary" Expected behavior Seems like previous version of axios (0.24.0) automatically add correct header and also boundary. Or was there any breaking change that I didn't notice? Environment - Axios Version [0.25.0] - Node.js Version [16.0.0] - Additional Library Versions [formidable 2.0.1, React-Native 0.66.4] Additional context/Screenshots Not needed.
Error Output
error on backend "bad content-type header, no multipart boundary"
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix File Upload Issue in Axios 0.25.0
In Axios version 0.25.0, the automatic handling of the 'Content-Type' header for FormData has changed. The library no longer sets the 'Content-Type' to 'multipart/form-data' with the appropriate boundary, which is required for file uploads. This results in the backend not being able to parse the incoming file data correctly, leading to the 'bad content-type header, no multipart boundary' error.
Awaiting Verification
Be the first to verify this fix
- 1
Remove Manual Content-Type Header
Ensure that you are not manually setting the 'Content-Type' header when sending FormData. Axios will automatically set the correct header including the boundary when it detects FormData.
javascriptconst formData = new FormData(); formData.append('file', file); axios.post('/upload', formData); - 2
Check FormData Construction
Verify that the FormData object is constructed correctly and that the file is being appended properly. Ensure that the file variable contains a valid file object.
javascriptconst file = document.querySelector('input[type=file]').files[0]; const formData = new FormData(); formData.append('file', file); - 3
Update Backend to Handle Multipart
Ensure that the backend is configured to handle multipart/form-data correctly. If using a library like formidable, ensure it is set up to parse incoming file uploads.
javascript// Example using formidable const formidable = require('formidable'); const form = new formidable.IncomingForm(); form.parse(req, (err, fields, files) => { // Handle files }); - 4
Test File Upload
After making the above changes, test the file upload functionality to ensure that files are being uploaded correctly and that the backend can process them without errors.
javascriptaxios.post('/upload', formData) .then(response => console.log('Upload successful:', response)) .catch(error => console.error('Upload failed:', error));
Validation
Confirm that the file upload works without errors by checking the response from the backend. Ensure that the backend correctly receives and processes the uploaded file. Additionally, check the network tab in the browser's developer tools to verify that the request headers are set correctly.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep