honojs/hono

[Bug]: form validator does not return all data

Closed this issue · 6 comments

What version of Hono are you using?

4.3.2

What runtime/platform is your app running on?

Node 20.10.0 / Windows 10 Pro

What steps can reproduce the bug?

The form validator in hono does not return all data when using with zod-validator.

When you use zod-validator to validate multiple uploaded file of request form data then it only returns last file data. It should return all the files with the same key as an array,

validate-body-data

  1. Start a new Hono project using create-hono with pnpm and select NodeJS template. pnpm create hono my-app
  2. Install @hono/zod-validator and zod to validate incoming request body and params. pnpm add @hono/zod-validator zod.
  3. Now, in index.ts create a POST /upload route for file upload without using zod-validator.
  4. Create another POST /validate-upload route for file upload to accepts data as FormData in which use zod-validator to validate incoming data.

Github Repro Link: https://github.com/ParasSolanki/hono-multi-file-upload-validation-bug.

If i use c.req.parseBody() as mentioned here then i do get all the multiple uploaded files in an array.

parse-body-data

What is the expected behavior?

If key is ending with "[]" then it should return data in an array form after the validation. Same logic as we have for the parseBody() here.

What do you see instead?

No response

Additional information

In the validator.ts we should handle logic for key ending with "[]". Instead of returning last value it should return it as an array.

fzn0x commented

Can you try to use { all: true } as arguments in parseBody?

await c.req.parseBody({ all: true });

also for validator there is a valid issue where Hono only validate the last file uploaded:

// my validator schema
export const PostUploadFileSchema = z
  .object({
    "image[]": z
      .custom<Blob>()
      .refine(
        (blob) => {
          return blob.size <= MAX_FILE_SIZE;
        },
        {
          message: `More than ${MAX_FILE_SIZE} are not allowed`,
        }
      )
      .refine((blob) => ACCEPTED_IMAGE_TYPES.includes(blob?.type), {
        message: "Only .jpg, .jpeg, .png and .webp formats are supported.",
      }),
  })
  .openapi("Post Upload File");
  
// for types do like this as Blob
const images = body["image[]"] as Blob;

I'm trying to upload 2 files, first file is the invalid one, but both is uploaded and pass the validator.

Screenshot 2024-05-07 025229

@fzn0x Yeah, It is working for c.req.parseBody(). The issue is in validator that it does not return all data in an array.

Hi @ParasSolanki

Thank you for the issue. This is not an unimplemented thing rather than a bug. But it should be implemented. I'll work on it later.

Hi @ParasSolanki

This might be fixed in #2639 and released the new version v4.3.3 including the fix. Let me know if it still has a problem!

That's great! I'll definitely test out the new version and let you know if the issue persists.

Yeah the issue is resolved now its successfully validating and we get the data in an array.

image