Upload to an R2 bucket binding in a cloudflare-module preset app

[dreamy pine]

This is my attempt to implement an endpoint that receives a file and uploads it to an R2 bucket binding. But I'm not sure if getRequestWebStream(event) is the only and propery way to get a ReadableStream of the request body.

export default defineEventHandler(async (event) => {
  const bucket = event.context.cloudflare!.env.MY_BUCKET
  const { key } = getQuery(event)
  await bucket.put(key, getRequestWebStream(event)!)
})

However, the above implementation causes the following error to be thrown:

Provided readable stream must have a known length (request/response body or readable half of FixedLengthStream)

another attempt was to use the request.body directly from the cloudflare context object.

  await bucket.put(key, event.context.cloudflare!.request.body)

but while this doesn't throw any errors anymore, it just saves an empty file (0B).

Any tips on what causes this and how to resolve it?

[undone shadow]

Hi @dreamy pine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I'm sorry, but the knowledge sources provided do not contain explicit information about handling file uploads to a Cloudflare R2 bucket binding in a Nuxt (Nitro) server environment, nor do they detail the correct way to obtain a ReadableStream with a known length for the R2 API.

The documentation for the cloudflare-r2-binding driver in Unstorage shows how to set up the driver and mentions that you can use the binding in a Cloudflare Worker environment, but it does not provide details about handling file uploads or the requirements for the stream length when calling bucket.put() with a stream. It also does not mention getRequestWebStream(event) or how to ensure the stream has a known length, which is required by the R2 API. The transaction options for getItemRaw are described, but not for put operations or file uploads specifically Cloudflare R2 (binding) driver.

Based on your description, the error about the stream needing a known length is a Cloudflare R2 API requirement, but the knowledge sources do not provide a solution for this. Similarly, the issue with saving an empty file when using event.context.cloudflare!.request.body is not addressed in the sources.

In summary:
The knowledge sources do not contain enough information to answer your question about the correct way to upload a file to a Cloudflare R2 bucket binding in a Nuxt app, or how to provide a ReadableStream with a known length for the R2 API. You may need to consult the official Cloudflare Workers and R2 documentation or seek advice from the Nuxt or Cloudflare communities for this specific use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@dreamy pine Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[dreamy pine]

@undone shadow what about getting the ReadableStream of an incoming request from within an event handler in Nitro/Nuxt?

[undone shadow]

Let me check the knowledge base for you again. One moment! :books:

---

In Nitro/Nuxt, the knowledge sources do not explicitly document a built-in method for directly obtaining a ReadableStream of the incoming request body from within an event handler. The standard approach for handling request bodies in Nitro is to use helpers like readBody(event) for JSON or form data, and readMultipartFormData(event) for multipart uploads Body Handling.

For streaming data, there is an example of sending a stream in a response using sendStream(event, fs.createReadStream(...)), but not for reading a stream from the request Advanced Usage. The sources do not mention a function like getRequestWebStream(event) or how to access the raw request stream directly.

Summary:
The knowledge sources do not provide enough information to confirm the correct or recommended way to obtain a ReadableStream of the incoming request in a Nitro event handler. If you need this functionality, you may need to consult the Nitro or h3 documentation directly or explore the event object for lower-level Node.js request access.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: