supabase/storage-js

TypeError: fetch failed - Nextjs 13

felri opened this issue · 4 comments

felri commented

Bug report

  • I confirm this is a bug with Supabase, not with my own application.
  • I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

Sending large files (5-20mb) always returns me fetch failed using Nextjs 13

To Reproduce

const uploadResult = await storageClient
  .from(STORAGE_BUCKET)
  .upload(filePath, file, {
    contentType: `video/${fileExt}`,
    upsert: true
  });

give me:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11522:11) {
  cause: Error: write EPIPE
      at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)
      at WriteWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -32,
    code: 'EPIPE',
    syscall: 'write'
  }
}

Additional context

It seems that nextjs 13 removed node-fetch in favor of undici and this is causing a lot of problems, any chance that this bug is related to mine?

vercel/next.js#54961

WildEgo commented

I have the same issue while using node 20, without next just standard node

VCasecnikovs commented

Having the same

VCasecnikovs commented

I have solved this problem for myself:

The problem happens, when I send File to Supabase Storage.

To solve the problem, I send Array Buffer:

let array_buffer = await image.arrayBuffer();
KevinHCH commented

Yeah, I had the same issue uploading imgs or audio files to supabase storage, I could solve using this function, so now, you can send any file to supabase storage.
Don't to forget to set the proper contentType

export const parseToArrayBuffer = async (file: Blob) => {
  const buffer = await file.arrayBuffer()
  const array = new Uint8Array(buffer)
  return array
}

// route.ts
const img = formData.get("avatar")
const imgBuffer = await parseToArrayBuffer(img as Blob)
const { data, error } = await supabase.storage.from(bucketName).upload(name, imgBuffer, {
    cacheControl: '3600',
    upsert: true,
    contentType: contentType,
  })
  • 👍2