Using RPC with file uploads

[emirotin]

I have the file upload working so far, with a POST handler, parseBody, and manually constructing the FormData on the client-side. It's good enough for my case, but I also wanted to explore the RPC path.

For that, I cannot figure out several things:

• is it ever supposed to work?
• if yes, how do I build the zod schema?
• if both above are OK, how does parseBody work with req.valid?

[yusukebe]

Hi @emirotin

Unfortunately, RPC mode does not support file uploading now. It may be difficult to support, but it might be a good idea to leave this as a request

[RickeyWard]

If it wasn't for this discussion I never would have known that this isn't expected to work. I'd love it to work, but also It would be great if the HC/RPC docs indicated that multipart formdata and files aren't yet supported.

[yusukebe]

@RickeyWard I've added it! honojs/website#422

[sureddibhargav]

[Meess]

@sureddibhargav this seems fully unrelated to this discussion. Could you open a new Q&A discussion?

[sureddibhargav]

sure. sorry for it. I created a new discussion

[vignesh-gupta]

@yusukebe I found a tutorial where we have a file upload with hono rpc. Link

I tried the same but in my middleware, when I check instanceof File it outcomes false.

For Whole code base - https://github.com/vignesh-gupta/jira-clone

Code for context -

import { zValidator } from "@hono/zod-validator";
import { Hono } from "hono";

import { DATABASE_ID, IMAGE_BUCKET_ID, WORKSPACES_ID } from "@/config";
import { sessionMiddleware } from "@/lib/session-middleware";
import { ID } from "node-appwrite";
import { createWorkspaceSchema } from "../schemas";

const workspaceApp = new Hono().post(
  "/",
  zValidator("form", createWorkspaceSchema),
  sessionMiddleware,
  async (c) => {
    const databases = c.get("databases");
    const user = c.get("user");
    const storage = c.get("storage");

    const { name, image } = c.req.valid("form");

    let uploadedImageUrl: string | undefined;

    if (image instanceof File) {
      const file = await storage.createFile(
        IMAGE_BUCKET_ID,
        ID.unique(),
        image
      );

      const arrayBuffer = await storage.getFilePreview(
        IMAGE_BUCKET_ID,
        file.$id
      );

      uploadedImageUrl = `data:${file.mimeType};base64,${Buffer.from(arrayBuffer).toString("base64")}`;
    }

    const workspace = await databases.createDocument(
      DATABASE_ID,
      WORKSPACES_ID,
      ID.unique(),
      {
        name,
        userId: user.$id,
        image: uploadedImageUrl,
      }
    );

    return c.json({
      success: true,
      data: workspace,
    });
  }
);

export default workspaceApp;