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
No description
21 Replies
Aditya Mathur
Aditya Mathur5mo ago
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
assaf fogelman
assaf fogelmanOP5mo ago
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
Aditya Mathur
Aditya Mathur5mo ago
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.
assaf fogelman
assaf fogelmanOP5mo ago
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
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
another weird thing: if I only append the text to the FormData, and remove the boundary in the header, IT DOES WORK
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
but when I try only appending the file, it fails again:
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
I've tried replacing the "asset.uri" with an address to a photo from the web:
No description
assaf fogelman
assaf fogelmanOP5mo ago
but it still gave the same answer
Aditya Mathur
Aditya Mathur5mo ago
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 try
Aditya Mathur
Aditya Mathur5mo ago
MDN Web Docs
File - Web APIs | MDN
The File interface provides information about files and allows JavaScript in a web page to access their content.
Aditya Mathur
Aditya Mathur5mo ago
Did this helped you?
assaf fogelman
assaf fogelmanOP5mo ago
I tried to find a workaround and I indeed have...
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
No description
assaf fogelman
assaf fogelmanOP5mo ago
and in the backend i use the:
No description
assaf fogelman
assaf fogelmanOP5mo ago
I hope Hono will pay attention to this issue, but at least there is a workaround, without using FormData. Thanks for your help!!!! If you need any assistance, let me know 🙏
Want results from more Discord servers?
Add your server