Uploading a file using FormData from React Native to Hono
using Hono 4.4.13
What runtime/platform is your app running on?
NodeJs
What steps can reproduce the bug?
in Hono:
in React Native (Expo):
What is expected behavior?
the React Native app should get the URI of an image file called "tilk_icon.png" that is in the "assets" folder.
Then, It should create a FormData and append that file.
It also should append a text entry.
Then it should send it to the server using Axios.
The Hono server should receive the request, parse the FormData, and return the object:
{message:"formData was sent successfully!"}
what happens?
I see an error in the back-end:
TypeError: Failed to parse body as FormData.
without the header it says:
"content-type": "application/x-www-form-urlencoded"
and
"_response": "multipart != application/x-www-form-urlencoded"
meaning, axios sends the FormData in the wrong "content-type".
p.s
using ".parseBody()" returns the same.
appending only the text, is the same.
What runtime/platform is your app running on?
NodeJs
What steps can reproduce the bug?
in Hono:
user.post("/test", test)
async function test (c:Context){
try {
const data = await c.req.formData();
return c.json({message:"formData was sent successfully!"});
} catch (error)
{
console.log(error);
return c.json({message:"error uploading formData", error})
}}in React Native (Expo):
useEffect(() => {
(async () => {
try {
// Load the asset
const asset = Asset.fromModule(require('../assets/tilk_icon.png'));
await asset.downloadAsync();
// Create FormData
const formData = new FormData();
//append a file
formData.append('file', {
uri: asset.uri,
name: 'tilk-icon.png',
type: 'image/png'
} as any);
//append a text
formData.append("text", JSON.stringify({message: "hi!"}));
//send
const {data} = await axios.post("user/test", formData,{headers:{
"content-type": 'multipart/form-data; boundary=--------------------------585591568098780255545610'
}});
console.log(data)
} catch (error) {
console.error('Error creating FormData (request):', error.request);
}
})()
},
[])What is expected behavior?
the React Native app should get the URI of an image file called "tilk_icon.png" that is in the "assets" folder.
Then, It should create a FormData and append that file.
It also should append a text entry.
Then it should send it to the server using Axios.
The Hono server should receive the request, parse the FormData, and return the object:
{message:"formData was sent successfully!"}
what happens?
I see an error in the back-end:
TypeError: Failed to parse body as FormData.
without the header it says:
"content-type": "application/x-www-form-urlencoded"
and
"_response": "multipart != application/x-www-form-urlencoded"
meaning, axios sends the FormData in the wrong "content-type".
p.s
using ".parseBody()" returns the same.
appending only the text, is the same.
