Want some help with the Hono JS TypeError: formKey is not iterable.

[rohit-nayak123]

Hello everyone,

I am trying to make an image compressor using NextJS as the frontend and HonoJS as the backend. however suddenly I got this annoying error message

What the program does is take multiple images as input and send them to a server made using Hono and after that, the server compresses them as much as possible and stores them

Here is the fronted code. (using next js )

Also, here is my backend code.

As far as my observation goes, the selected code is the main reason for the error. However, the selected code is from the official documentation. 

const body = await c.req.parseBody({ all: true })
body['hoge']

I am using pnpm v9.0.6, node js v20.12.2, hono v4.3.4, next js v14.2.3, react v18.3.1 and react-dom v18.3.1

[NicoPlyley]

Try adding the content type header

headers: {
  'Content-Type': 'multipart/formdata',
},

[rohit-nayak123]

Sorry it didn't work for me, I just got another error message

DOMException [AbortError]: Error: Multipart: Boundary not found
at new DOMException (node:internal/per_context/domexception:53:5)
at Request.formData (node:internal/deps/undici/undici:5469:21)
at Request.value (file:///D:/github%20Repo/webpics/node_modules/.pnpm/@HONO[email protected]/node_modules/@hono/node-server/dist/index.mjs:103:40)
at HonoRequest.cachedBody (file:///D:/github%20Repo/webpics/node_modules/.pnpm/[email protected]/node_modules/hono/dist/request.js:83:37)
at HonoRequest.formData (file:///D:/github%20Repo/webpics/node_modules/.pnpm/[email protected]/node_modules/hono/dist/request.js:98:17)
at parseFormData (file:///D:/github%20Repo/webpics/node_modules/.pnpm/[email protected]/node_modules/hono/dist/utils/body.js:12:34)
at parseBody (file:///D:/github%20Repo/webpics/node_modules/.pnpm/[email protected]/node_modules/hono/dist/utils/body.js:7:12)
at HonoRequest.parseBody (file:///D:/github%20Repo/webpics/node_modules/.pnpm/[email protected]/node_modules/hono/dist/request.js:59:30)
at (D:\github Repo\webpics\server.ts:85:26)
at dispatch (file:///D:/github%20Repo/webpics/node_modules/.pnpm/[email protected]/node_modules/hono/dist/compose.js:29:23)

However, I found out that there is a method as
c.req.formData()

which is giving me output as desire

FormData {
[Symbol(state)]: [
{ name: 'image', value: [File] },
{ name: 'image', value: [File] },
{ name: 'image', value: [File] }
]
}

And I am surprised to see that there is no mention of this thing in the whole docs.

** I request you to update the documentation **

[NicoPlyley]

Let me test this out and then I will submit any updates needed to the docs