Next.js Discord

Discord Forum

Internal Server Error: TypeError: Failed to parse body as FormData.

Unanswered
readme posted this in #help-forum
Open in Discord
When i try to upload an image to my api route it works on dev but when i deploy the app to prod it does not work and give me this error

3 Replies

API Route
import { createReceiptStepOne } from "@/helpers/createReceiptStepOne";
import { createReceiptStepThree } from "@/helpers/createReceiptStepThree";
import { createReceiptStepTwo } from "@/helpers/createReceiptStepTwo";
import { decodeToken } from "@/helpers/decodeToken";
import { NextResponse } from "next/server";

export const config = {
  runtime: "nodejs",
};

export const POST = async (req) => {
  try {
    const formData = await req.formData();
    const { sub: user, error } = await decodeToken(req);

    if (error) {
      return NextResponse.json({ error: "Not a valid token" }, { status: 401 });
    }

    const step1 = await createReceiptStepOne(formData);
    if (step1.error) {
      return NextResponse.json(
        {
          step: 1,
          error: step1.error,
        },
        { status: 400 }
      );
    }

    const step2 = await createReceiptStepTwo(formData, user);
    if (step2.error) {
      return NextResponse.json(
        {
          step: 2,
          error: step2.error,
        },
        { status: 400 }
      );
    }

    const step3 = await createReceiptStepThree({
      receiptData: step1.data,
      imageUrl: step2.imageUrl,
      imageName: step2.imageName,
      imagePath: step2.imagePath,
      user,
    });
    if (step3.error) {
      return NextResponse.json(
        {
          step: 3,
          error: step3.error,
        },
        { status: 400 }
      );
    }

    return NextResponse.json(
      {
        message: "Receipt created successfully",
        receipt: step3.receipt,
      },
      { status: 200 }
    );
  } catch (error) {
    console.error("Internal Server Error: ", error);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
};
API Call from server side function
"use server";

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

export const createReceipt = async (formData) => {
  try {
    const { getAccessTokenRaw } = getKindeServerSession();
    const token = await getAccessTokenRaw();
    const response = await fetch(`${process.env.KINDE_SITE_URL}/api/receipts/new`, {
      method: "POST",
      headers: {
        "x-kinde-token": token,
      },
      body: formData,
    });

    if (response.ok) {
      const result = await response.json();
      return result;
    } else {
      const errorResult = await response.json();
      return { error: errorResult.error };
    }
  } catch (error) {
    return {
      error,
    };
  }
};
(the file is too long and my word limit exceeded)