"Body is unusable" or "fetch failed" when using server to upload Zip files

Hi I'm getting errors like

- error Error: [object Promise]
    at getProperError (/path-to-project/node_modules/next/dist/lib/is-error.js:41:12)
    at DevServer.run (/path-to-project/node_modules/next/dist/server/dev/next-dev-server.js:924:53)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async DevServer.handleRequestImpl (/path-to-project/node_modules/next/dist/server/base-server.js:533:20) {
  digest: undefined
}
- error unhandledRejection: Error [TypeError]: Body is unusable
    at specConsumeBody (/path-to-project/node_modules/next/dist/compiled/undici/index.js:2:4358)
    at Response.json (/path-to-project/node_modules/next/dist/compiled/undici/index.js:2:2573)
    at Function.fromResponse (file:///path-to-project/node_modules/@uploadthing/shared/dist/index.mjs:198:33)
    at uploadFilesInternal (file:///path-to-project/node_modules/uploadthing/dist/server.mjs:53:28)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.uploadFiles (file:///path-to-project/node_modules/uploadthing/dist/server.mjs:126:19)

- error Error: [object Promise]
    at getProperError (/path-to-project/node_modules/next/dist/lib/is-error.js:41:12)
    at DevServer.run (/path-to-project/node_modules/next/dist/server/dev/next-dev-server.js:924:53)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async DevServer.handleRequestImpl (/path-to-project/node_modules/next/dist/server/base-server.js:533:20) {
  digest: undefined
}
- error unhandledRejection: Error [TypeError]: Body is unusable
    at specConsumeBody (/path-to-project/node_modules/next/dist/compiled/undici/index.js:2:4358)
    at Response.json (/path-to-project/node_modules/next/dist/compiled/undici/index.js:2:2573)
    at Function.fromResponse (file:///path-to-project/node_modules/@uploadthing/shared/dist/index.mjs:198:33)
    at uploadFilesInternal (file:///path-to-project/node_modules/uploadthing/dist/server.mjs:53:28)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.uploadFiles (file:///path-to-project/node_modules/uploadthing/dist/server.mjs:126:19)

if I don't set the (readonly) property name on myBlob or

{
  data: null,
  error: { code: undefined, message: 'fetch failed', data: undefined }
}

{
  data: null,
  error: { code: undefined, message: 'fetch failed', data: undefined }
}

when trying to upload files using utapi.uploadFiles(myBlob). The file is a ZIP file and I can perfectly serve it later in the code using

res.setHeader("Content-Type", "application/zip");
res.setHeader("Content-Disposition", "attachment; filename=foo.zip");
return res.status(200).send(Buffer.from(await myBlob.arrayBuffer()));

res.setHeader("Content-Type", "application/zip");
res.setHeader("Content-Disposition", "attachment; filename=foo.zip");
return res.status(200).send(Buffer.from(await myBlob.arrayBuffer()));

What am I doing wrong?

3 Replies

luke•16mo ago

Running into the same issue, did you find a solution?

Michael SchaufelbergerOP•16mo ago

No, I've "quickly" implemented it using AWS S3, since I had to hurry 😅.

luke•16mo ago

the solution seems to be doing it like this and adding the file.name

// Create a file from the buffer
  const file = new Blob([pdfBuffer], { type: "application/pdf" });

  // @ts-ignore
  file.name = "markdown.pdf";

   try {
    const uploadedFile = await utapi.uploadFiles(file);
    console.log("uploaded via utapi", uploadedFile);
  } catch (e) {
    console.log("Upload error:", e);
  }

// Create a file from the buffer
  const file = new Blob([pdfBuffer], { type: "application/pdf" });

  // @ts-ignore
  file.name = "markdown.pdf";

   try {
    const uploadedFile = await utapi.uploadFiles(file);
    console.log("uploaded via utapi", uploadedFile);
  } catch (e) {
    console.log("Upload error:", e);
  }

Gaming

Programming

"Body is unusable" or "fetch failed" when using server to upload Zip files