github-actions[bot]
commented
6 months ago | :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
Open felipeavila-vp opened 6 months ago
github-actions[bot]
commented
6 months ago | :warning: | Missing Reproducible Example |
|---|---|
| :information_source: | We could not detect a reproducible example in your issue report. Please provide either:
|
H3tansh
commented
6 months ago This issue still in
const formData = new FormData() formData.append('audio_file', { name: fileName, type: 'audio/mp3', uri: filePath })
await fetch('http endpoint', {
body: formData,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
Authorization:
'Bearer token'
}
})
.then(res => {
console.log('test result ', res)
console.log('test result status ', res.status)
})
.catch(e => {
console.log('test e ', e)
})This returns network error
REACT-NATIVE-INFO output:-
System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Memory: 599.88 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.19.0 path: ~/.nvm/versions/node/v18.19.0/bin/node Yarn: version: 3.6.4 path: /opt/homebrew/bin/yarn npm: version: 10.2.3 path: ~/.nvm/versions/node/v18.19.0/bin/npm Watchman: version: 2024.04.15.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.15.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:
saadkhan2211
commented
5 months ago Same issue here..
const fileExtension = coverImage.split(".").pop();
// Create a new FormData instance
const formData = new FormData();
formData.append("image", {
uri: coverImage,
name: "image-" + new Date() + `.${fileExtension}`,
type: `image/${fileExtension}`,
} as any);
// Append other form fields to FormData
formData.append("food_name", data.food_name);
formData.append("description", data.description);
formData.append("price", String(data.price));
formData.append("category", data.category);
formData.append("addOn", JSON.stringify(data.addon));
// Append sizes if applicable
if (isSize && data.size.length > 0) {
data.size.forEach((input, index) => {
formData.append(`size[${index}]`, input.size);
formData.append(`size_price[${index}]`, String(input.price));
});
}
const response = await axios.post(
`${app_url}/addMenuItem/${resId}`,
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
);When I console.log req.file and req.body,
undefined [Object: null prototype] { food_name: '', description: '', price: 'null', category: '', addOn: '{"addon":"","price":0}' }
Here I'm not sending any data in req.body only sending file to req.file which I get undefined.. This works fine with react native 0.73.x but not with 0.74.x
github-actions[bot]
commented
5 months ago This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
felipeavila-vp
commented
4 months ago Same problem here yet
huzhanbo1996
commented
4 months ago @saadkhan2211 @felipeavila-vp @H3tansh Hi, could you provide Missing Reproducible Example as above, so I can help you solve this problem?
H3tansh
commented
4 months ago @huzhanbo1996 below is my working code, It only works if I use deployed HTTPS API URL , but do not work if I use HTTP endpoint running on my localhost.
const formData = new FormData()
formData.append('file', {
uri: path,
name: fileName, // 'sound.mp3'
type: fileType // 'audio/mp3'
})
const response = await fetch(
'https://dummy.url.com/api,
{
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${TOKEN}`
},
body: formData
}
)P.S:- Issue only persist in android.
here is the issue I've created https://github.com/facebook/react-native/issues/44737
raphpay
commented
1 month ago Same here, but with windows. It appears to be a problem only with multipart/form-data. I got the same code running on all platforms, but windows is the only one causing trouble, and only with this method :
static async postFormData<T>(
endpoint: string,
data: any = {},
token?: string,
): Promise<T> {
try {
const url = `${API_BASE_URL}/${endpoint}`;
const headers: Record<string, string> = {
'Content-Type': 'multipart/form-data',
};
// Include token in headers if provided
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const response = await fetch(url, {
method: HttpMethod.POST,
headers,
body: data,
});
if (!response.ok) {
let errorMessage = `HTTP error! Status: ${response.status}`;
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
const responseData = await response.json();
if (responseData && responseData.reason) {
errorMessage = responseData.reason;
}
}
throw new Error(errorMessage);
}
return (await response.json()) as T;
} catch (error) {
throw error;
}
}Hi Everyone, Mine got fixed after some troubleshooting...All I did was that I removed Content-Type part from headers and It worked
jocoders
commented
3 weeks ago I had the same problem after upgrade React Native to 0.72.17. And in my case renamed from Content-Type => content-Type fixed the error.
sssajjad007
commented
1 week ago same issue,
Description
When I try to send some post request sending a file with formData I receive a Network Error. Most of the time the request works fine, but sometimes I receive this error. The problem occurs when use Android, works fine with IOS.
Recently I updated my application to react-native 0.74.1(latest), before the version was 0.64.4. In older version all works fine.
Current versions:
Steps to reproduce
Only try to submit some files using formData
React Native Version
0.74.1
Affected Platforms
Runtime - Android
Output of
npx react-native infoStacktrace or Logs
Reproducer
https://github.com
Screenshots and Videos
No response