Next.js Discord

Discord Forum

How to send ZIP files through server actions

Unanswered
Cuban Crocodile posted this in #help-forum
Open in Discord
Cuban CrocodileOP
I am using Next 14.2.3 in my app. I am taking a user input, and sending it to the server with the useFormStatehook. In the action file, I want to process the input and return a zip file back to the user so they can download it.

I am able to create the ZIP file (jszip library) and save it in the local /.next directory and access it. But I am stuck when it comes to sending it back to client.

Maybe I could use Route Handlers in Next.js 14 but I want to know if we can do it with server actions/useFormState hook.

1 Reply

@Cuban Crocodile I am using Next 14.2.3 in my app. I am taking a user input, and sending it to the server with the `useFormState `hook. In the action file, I want to process the input and return a zip file back to the user so they can download it. I am able to create the ZIP file (`jszip` library) and save it in the local `/.next` directory and access it. But I am stuck when it comes to sending it back to client. Maybe I could use Route Handlers in Next.js 14 but I want to know if we can do it with server actions/useFormState hook.
joulev
"use server";

import fs from "node:fs/promises";

export async function downloadFile() {
  const buffer = await fs.readFile("pfp.png");
  return buffer;
}

"use client";

import { downloadFile } from "~/lib/actions";

export default function Page() {
  return (
    <button
      type="button"
      onClick={async () => {
        const buffer = await downloadFile();
        // then download it or do anything you want with it
        const blob = new Blob([new Uint8Array(buffer)], { type: "image/png" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "pfp.png";
        a.click();
        URL.revokeObjectURL(url);
      }}
    >
      Click me
    </button>
  );
}