NEXTJs API : Using formdata to upload file is breaking in the hosted site, while works on local environment

Question

The below code is my client-api.ts uploadPOMedia function

export const uploadPOMedia = async (props: any) => {
  

  const res =  await axios({
    method: "POST",
    url: "/api/upload-po-document",
    data: props,
  });
  // eslint-disable-next-line no-console
  console.log("Response Status : " + res.status + " Response :" +res.data);

  return res.data;
};

Also I tried its alternative fetch function utilizing the following code but no-luck in this one too.

export const uploadPOMedia = async (props: any) => {
  const res: any = await fetch("/api/upload-po-document", {
    method: "POST",
    headers: {
      cache: "no-store",
    },
    body: props,
  });
  const response = await res.json();
  return response;
};

The route.ts for this upload-po-document route contains below code.

import { uploadPODocument } from "@agents/CheckoutAgent";
import { ErrorStack } from "@utils/Helpers/HelperUtility";
import { AREA } from "@utils/Logging/Areas";
import logger from "@utils/Logging/Logger";

export async function POST(request: Request) {
  try {
    const dataResponse = await request.formData();
    const fileEntry = dataResponse.get("file");
    if (fileEntry instanceof Blob) {
      const file = new File([fileEntry], fileEntry.name);
      const fileData = await uploadPODocument(file);
      return Response.json(fileData);
    }
  } catch (error) {
    logger.error(AREA.Checkout, ErrorStack(error));
    return new Response("Internal server error.", {
      status: 500,
    });
  }
}

and I call the uploadPOMedia function from my .tsx file (view level file) , the call for the mediaupload contains the following code.

          const formData = new FormData();
          formData.append("file", file);
          await uploadPOMedia(formData).then((x) => (poDocumentPath = x));

So basically, we are creating formdata from file and then calling uploadPOMedia.

Now, the problem here I am facing is whenever I test my code locally, or even by creating production build locally, it works. I can debug the server side code (i.e, route.ts) and I get dataResponse object and fileEntry object too as the file.

But on the hosted site, this breaks.I am getting the following errors in my console from client-api.ts

Console Errors on hosted site.

Answer 1

So the problem was with the if statement.

  if (fileEntry instanceof Blob) 

In the Local environment it was returning true, and in the hosted site was returning false