Including files in Server Functions?

const uploadImageServerFn = createServerFn({ method: "POST" })
  .inputValidator(
    z.object({
      image: z.file().mime(["image/png", "image/jpeg"]),
    })
  )
  .handler(async ({ data }) => {
    console.log("image found with type", data.image.type);
    return {
      name: data.image.name,
      type: data.image.type,
      size: data.image.size,
    };
  });

export const Route = createFileRoute("/test")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    // uploader that uploads file of File
  );
}

Error
The value [object File] of type "object" cannot be parsed/serialized.
      
There are few workarounds for this problem:
- Transform the value in a way that it can be serialized.
- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.

- For more information, please check the "cause" property of this error.
- If you believe this is an error in Seroval, please submit an issue at https://github.com/lxsmnsyc/seroval/issues/new
    at parseTopAsync (index.mjs?v=54d9538e:1759:57)
    at async toJSONAsync (index.mjs?v=54d9538e:3946:8)
    at async serialize (serverFnFetcher.js?v=54d9538e:75:5)
   //...
      
There are few workarounds for this problem:
- Transform the value in a way that it can be serialized.
- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.
    at parseObjectAsync (index.mjs?v=54d9538e:1715:9)
    at async parseAsync (index.mjs?v=54d9538e:1743:33)
    at async parseProperties (index.mjs?v=54d9538e:1393:21)
    at async parsePlainObject (index.mjs?v=54d9538e:1443:5)
overrideMethod @ installHook.js:1