File upload example produces an error

[toy-crane]

Problem Description

I'm trying to implement a file upload feature in a Next.js server component using next-safe-action and zod-form-data. However, I'm encountering an error when trying to validate the file input.

Code Example

"use server";

import { action } from "@/lib/safe-action";
import { zfd } from "zod-form-data";

const schema = zfd.formData({
  image: zfd.file(),
});

export const fileUploadAction = action
  .schema(schema)
  .action(async ({ parsedInput }) => {
    await new Promise((res) => setTimeout(res, 1000));

    // Do something useful with the file.
    console.log("fileUploadAction ->", parsedInput);

    return {
      ok: true,
    };
  });

Error Message

Error: File is not defined
   7 | const schema = zfd.formData({
>  8 |   image: zfd.file(), // Correctly handles file inputs in a server environment
     |              ^
   9 | });

Environment

• next-safe-action: 7.6.3
• zod-form-data: 2.0.2
• zod: 3.23.7

Analysis

It seems that zfd.file() is trying to access the File type, which is not available in a server environment. This is causing the "File is not defined" error.

Question

How can I fix this issue to properly handle file uploads in a Next.js server component? Is there an alternative method or configuration I should be using?

Additional Information

Any insights or suggestions would be greatly appreciated. If you need any more information about my setup or have encountered a similar issue, please let me know.

Thank you in advance for your help!

[TheEdoRan]

Hi, are you on Node 18? Please take a look at:

• [BUG] Issue When Using useAction to Create Form with File Schema #126

[toy-crane]

Thank you!!
it works at node v20