multipart/form-data fails to upload file when using FormData #4885
Comments
|
Here is a log for reference, it seems like actual reason for error is a 400 status code response, but I have no idea why sometimes this would come back when usually the request works: I think maybe the issue is related to request headers not being set properly ( |
|
yes ,is not work when the data type is formdata. There is a code in /axios/lib/adapters/xhr.js file that doesn't work。 |
How do I use this without touching the core axios stuff? |
|
I am wondering the same. I'm not about to change internal implementation of an HTTP client, just to get the correct status code back. |
|
Aparently, this solution axios.post(url, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
transformRequest: formData => formData,
})Specifically this line: It makes sense since it assumes data transformation but then returns the same value🤔 |
|
Actually, it's sending |
|
So I managed to get this working. I had to create a totally new instance like so: axios.post(
'/endpoint/here',
formData, /*this has to be the exact formData object. DO NOT DE-STRUCTURE*/
{
headers: {
'Authorization': `Bearer ${'token'}`,
'Content-Type': 'multipart/form-data'
},
...options
}
)Am not sure why this works and not the pre-instantiated one |
|
Been trying to make this work for over 5 hours now and still stuck. not sure what I'm missing. The only difference is that I convert the a buffer to blob first. I get this before the request FormData { [Symbol(state)]: [ { name: 'file', value: [File] } ] } and that's what I get after the error data: FormData { [Symbol(state)]: [Array] } Not sure why this happens. |
After upgrading to axios ^1.1.0 from ^0.27.2 in the browser I am seeing multipart/form-data uploads that previously worked breaking with my backend returning HTTP 413 Payload too large. On inspection of the request headers, in the working version, the body was being sent as multipart/form-data as expected, but version 1.1.0 was changing the content-type to application/x-www-form-urlencoded for some reason. export const FileClient = axios.create({
baseURL: '/api',
headers: {
'Content-type': 'multipart/form-data',
},
});
...
const formData = new FormData();
formData.append('file', file, file.name);
const result = await FileClient.post<string>(url, formData, {
headers: {
Authorization: `Bearer ${token}`,
},
});For whatever reason, using a non-precreated instance works... import axios from 'axios';
...
const formData = new FormData();
formData.append('file', file, file.name);
const result = await axios.post<string>(url, formData, {
baseURL: '/api',
headers: {
Authorization: `Bearer ${token}`,
},
}); |
|
Fixing capitalization of the 'Content-Type' header the request seems to work as expected. export const FileClient = axios.create({
baseURL: '/api',
headers: {
'Content-Type': 'multipart/form-data',
},
}); |
|
I am using Axios 1.4 (also tried with 1.3.4) and the work around still does not work for me: If I look at the actual request payload it still just sends the string "[object Object]" instead of the actual data... help... |
Hi,
I'm trying to use FormData to POST a file using
multipart/form-dataI noticed for very small files this works no problem but as soon as the length gets above about 10KB I start to see errors
Error [ERR_UNHANDLED_ERROR]: Unhandled error. ('[AxiosError: maxContentLength size of -1 exceeded]After debugging the solution I have noticed that if I put a breakpoint just before the call to axios and wait a few seconds, then I don't see this failure. Is there some promise I am supposed to await that I am missing?
Service class
Usage
Only issue I could find with the same error is #4806
The text was updated successfully, but these errors were encountered: