I have a Nuxt3 project that is hosted on Vercel. Currently, I added an upload-file functionality that sends the data to an API (the API is hosted on Firebase). The API stores the files in Firestore.

Initially, my project was SSR, however, because of the FUNCTION_PAYLOAD_TOO_LARGE issue on Vercel, I tried to switch to CSR

First try, I added route rules to have the upload page upload via the client

routeRules: {
    "/services/upload": {ssr: false},
}

This didn’t work. Then i set the entire project to CSR via {ssr: false}. This also doesn’t seem to work.

Vercel documentation says

Client-side uploads: For large file uploads, consider using
client-side uploads directly to Vercel Blob, where the file is sent
securely from the client to Vercel Blob without going through the
server

But since this doesn’t work, I cannot figure out what I’m doing wrong.
My upload function looks like this. I tried with both the headers recommended by Vercel as well as without (no difference)

const uploadFiles = async (files: File[]): Promise<void> => {
    const formData = new FormData();
    files.forEach((file) => formData.append("files", file));

    await $fetch("/api/upload-files-session", {
        method: "POST",
        headers: {
            "Authorization": `Bearer ${idToken}`,
            "Content-Security-Policy": "default-src 'none'",
            "X-Frame-Options": "DENY",
            "X-Content-Type-Options": "nosniff",
            "Content-Disposition": `attachment; filename="${files[0].name}"`
        },
        body: formData,
    });
};

For what is worth, a file has usually between 15 and 25 MB. Doesn’t matter if I upload just 1 file at a time, or more.

Any suggestions on what I can do to fix this?