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:
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.![No description](https://cdn.answeroverflow.com/1262056432749248655/348535390-fef8d80b-10d5-4367-90ff-fd43d772c692.png)
![No description](https://cdn.answeroverflow.com/1262056433067888740/348535377-eb5824be-e472-4281-a174-f4d1f6cdff3b.png)
21 Replies
This is something you can try to debug, use something like postman to send request to your hono server. Add the form data props and send to the server, if there is an error it’s means it’s related to hono so show the error screenshot. If not then the error is in your react native. Kindly provide this info, so that we can better assess the issue
it works with Postman
but I also uploaded from React Native to Multer (in Express) many times successfully, so my guess is that it is something with how Hono interacts with the React Native FormData (which is different than the JS FormData it seems...)
Or I don't know
I dont think there should be any difference in the Form Data API, because it's just REST and you are using axios. Quick question, if you add
logger
middleware in the hono app, can you check if you are recieving the request? Because I am not sure if you are able to send request on user/test
url.this is the output with Logger():
<-- POST /user/test
TypeError: Failed to parse body as FormData.
at node:internal/deps/undici/undici:5410:27
at successSteps (node:internal/deps/undici/undici:5454:27)
at fullyReadBody (node:internal/deps/undici/undici:4381:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async consumeBody (node:internal/deps/undici/undici:5463:7)
at async parseFormData (file:///C:/programming/_chat_app/chat-app/backend-server/node_modules/hono/dist/utils/body.js:13:20)
at async HonoRequest.parseBody (file:///C:/programming/_chat_app/chat-app/backend-server/node_modules/hono/dist/request.js:56:42)
at test (C:\programming_chat_app\chat-app\backend-server\src\routes\user\user.ts:49:18)
at async dispatch (file:///C:/programming/_chat_app/chat-app/backend-server/node_modules/hono/dist/compose.js:29:17)
at async cors2 (file:///C:/programming/_chat_app/chat-app/backend-server/node_modules/hono/dist/middleware/cors/index.js:70:5)
--> POST /user/test 200 236ms
![No description](https://cdn.answeroverflow.com/1262273795742371860/image.png)
another weird thing:
if I only append the text to the FormData, and remove the boundary in the header, IT DOES WORK
![No description](https://cdn.answeroverflow.com/1262275126364344430/image.png)
![No description](https://cdn.answeroverflow.com/1262275301719801899/image.png)
but when I try only appending the file, it fails again:
![No description](https://cdn.answeroverflow.com/1262275572495679648/image.png)
![No description](https://cdn.answeroverflow.com/1262275657103314977/image.png)
I've tried replacing the "asset.uri" with an address to a photo from the web:
![No description](https://cdn.answeroverflow.com/1262280835105816576/image.png)
but it still gave the same answer
I haven't worked with react native, so this might be a dumb solution. But is there a
new File()
thing there? cause this is javascript's function which you can use to create file object. Maybe add your params in this file object and then tryMDN Web Docs
File - Web APIs | MDN
The File interface provides information about files and allows JavaScript in a web page to access their content.