File is going through properly with Hono RPC

[vignesh-gupta]

What version of Hono are you using?

4.6.4

What runtime/platform is your app running on?

bun

What steps can reproduce the bug?

1. Create a sample form in Next JS
2. Create a schema with zod

export const createWorkspaceSchema = z.object({
  name: z.string().trim().min(1, "Required"),
  image: z
    .union([
      z.instanceof(File),
      z.string().transform((val) => (val === "" ? undefined : val)),
    ])
    .optional(),
});

4. Setup a backend and zod validation middlerware
5. Use RPC and upload file with the frontend form.

Alternately - Clone and setup this - https://github.com/vignesh-gupta/jira-clone

with following .env:

NEXT_PUBLIC_APP_URL=http://localhost:3000

NEXT_PUBLIC_APPWRITE_ENDPOINT=
NEXT_PUBLIC_APPWRITE_PROJECT=

NEXT_PUBLIC_APPWRITE_DATABASE_ID=
NEXT_PUBLIC_APPWRITE_WORKSPACES_ID=
NEXT_PUBLIC_APPWRITE_IMAGE_BUCKET_ID=

NEXT_APPWRITE_KEY=

What is the expected behavior?

In the backend, the zod validation middleware should pass as the image is instance of File

Request snapshot from network tab

What do you see instead?

The zod validation failed and the image is not Instance of File

Zod throws following error

{
    "success": false,
    "error": {
        "issues": [
            {
                "code": "invalid_union",
                "unionErrors": [
                    {
                        "issues": [
                            {
                                "code": "custom",
                                "message": "Input not instance of File",
                                "fatal": true,
                                "path": [
                                    "image"
                                ]
                            }
                        ],
                        "name": "ZodError"
                    },
                    {
                        "issues": [
                            {
                                "code": "invalid_type",
                                "expected": "string",
                                "received": "object",
                                "path": [
                                    "image"
                                ],
                                "message": "Expected string, received object"
                            }
                        ],
                        "name": "ZodError"
                    }
                ],
                "path": [
                    "image"
                ],
                "message": "Invalid input"
            }
        ],
        "name": "ZodError"
    }
}

Additional information

No response

[nakasyou]

Hi @vignesh-gupta, I guess it is a Next.js's issue.

I researched for it. And I discovered that formData.get('file') isn't instance of File. I guess it is Next.js File implementation, it's not global class.
To bypass this, try to change a schema:

export const createWorkspaceSchema = z.object({
  name: z.string().trim().min(1, "Required"),
  image: z
    .union([
-     z.instanceof(File),
+     z.instanceof(Blob)
      z.string().transform((val) => (val === "" ? undefined : val)),
    ])
    .optional(),
});