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:
I tried both POST request and server components, but none worked. I need extra data for handling update: on form page, I have:
Inside
Would greatly appreciate any help or insight!
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
...
"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)}>
...
/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,
...
},
});
}
0 Replies