Upload files

Server Actions also allow you to upload files by using forms and inputs with type file.

note

1. File uploads only works with Node.js >= 20. Node.js 18 is not supported.
2. If you exceed 1 MB in size, by default, Next.js throws an error on the server informing that the file is too big. You can customize the max size by setting the bodySizeLimit option in next.config.js.

Since you must use FormData to upload files, here we use Zod and the zod-form-data library to validate and parse the input.

file-upload-action.ts

"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,
    };
  });

file-upload.tsx

"use client";

import { useAction } from "next-safe-action/hooks";
import { fileUploadAction } from "./file-upload-action";

export default function FileUploadPage() {
  const { execute } = useAction(fileUploadAction);

  return (
    <form action={execute}>
      <input
        type="file"
        name="image"
        placeholder="Image"
        accept="image/*"
      />
      <button type="submit">Submit</button>
    </form>
  );
}