Ziming Posts - Answer Overflow

Ziming

•Created by Ziming on 9/10/2023 in #questions

Error: <rejected> TypeError: Body is unusable

I am using the server api utapi for file upload. Even though file uploading and deleting work just fine locally. Once deployed on Vercel, I got this error:

Error updating door content: Promise {
  <rejected> TypeError: Body is unusable
      at specConsumeBody (node:internal/deps/undici/undici:6630:15)
      at Response.json (node:internal/deps/undici/undici:6533:18)
      at UploadThingError.fromResponse (/var/task/.next/server/chunks/9937.js:16521:37)
      at uploadFilesInternal (/var/task/.next/server/chunks/9937.js:17195:81)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.uploadFiles (/var/task/.next/server/chunks/9937.js:17276:21)
      at async updateDoorContent (/var/task/.next/server/app/edit/[path]/page.js:999:30)
      at async /var/task/node_modules/next/dist/server/app-render/action
...

Error updating door content: Promise {
  <rejected> TypeError: Body is unusable
      at specConsumeBody (node:internal/deps/undici/undici:6630:15)
      at Response.json (node:internal/deps/undici/undici:6533:18)
      at UploadThingError.fromResponse (/var/task/.next/server/chunks/9937.js:16521:37)
      at uploadFilesInternal (/var/task/.next/server/chunks/9937.js:17195:81)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.uploadFiles (/var/task/.next/server/chunks/9937.js:17276:21)
      at async updateDoorContent (/var/task/.next/server/app/edit/[path]/page.js:999:30)
      at async /var/task/node_modules/next/dist/server/app-render/action
...

I tried both POST request and server components, but none worked. I need extra data for handling update: on form page, I have:

"use client";
import { updateDoorContent } from "/app/_actions";
export default function EditContentForm({ door }) {
...
  const processData = async (data) => {
    const imageResponse = await updateDoorContent(fileData, data, door);
  };
...
  return (
    <form ref={formRef} onSubmit={handleSubmit(processData)}>
...

"use client";
import { updateDoorContent } from "/app/_actions";
export default function EditContentForm({ door }) {
...
  const processData = async (data) => {
    const imageResponse = await updateDoorContent(fileData, data, door);
  };
...
  return (
    <form ref={formRef} onSubmit={handleSubmit(processData)}>
...

Inside /app/_actions, I have:

export async function updateDoorContent(fileData, data, door) {
  ...
  const file = fileData.get("file");
  const isFileUpdate = data.isFileUpdate;
  const deleteOgFile = data.deleteOgFile;
  const ogImageFileKey = door.contentImage.fileKey;
  ...
  if (deleteOgFile) {
    await utapi.deleteFiles(ogImageFileKey);
    await Door.findByIdAndUpdate(...);
  }
  if (isFileUpdate) {
    const { data } = await utapi.uploadFiles(file);
    await Door.findByIdAndUpdate(doorId, {
      $set: {
        "contentImage.fileUrl": data.url,
         ...
      },
    });
  }

export async function updateDoorContent(fileData, data, door) {
  ...
  const file = fileData.get("file");
  const isFileUpdate = data.isFileUpdate;
  const deleteOgFile = data.deleteOgFile;
  const ogImageFileKey = door.contentImage.fileKey;
  ...
  if (deleteOgFile) {
    await utapi.deleteFiles(ogImageFileKey);
    await Door.findByIdAndUpdate(...);
  }
  if (isFileUpdate) {
    const { data } = await utapi.uploadFiles(file);
    await Door.findByIdAndUpdate(doorId, {
      $set: {
        "contentImage.fileUrl": data.url,
         ...
      },
    });
  }

Would greatly appreciate any help or insight!

1 replies

Gaming

Programming