Upload to R2 from pages?

[ryangildea]

Hi, I am building a file upload feature on my site, and I am using a regular HTTP form to upload the file. I am reading the file portion into an AsyncIterable, creating a ReadablStream from that, and passing it to my R2 bucket binding’s put() method. I get an error like this one:

Storing R2 object throws an error for some readable streams

When trying to store a R2 object, the following code works when the url is a binary object (like an image or pdf) but not for text: const response = await fetch(url) await env.MY_BUCKET.put('somekey', response.body) For urls (eg https://google.com), I get this error thrown: TypeError: Provided readable stream must have a known length (request/response body or readable half of FixedLengthStream) Is that because the fetch response does not contain a Content Length header? What should I do in t…

TypeError: Provided readable stream must have a known length (request/response body or readable half of FixedLengthStream)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async eval (/Users/ryan/projects/remix-cloudflare-template-test/app/utils/R2UploadHandler.ts:40:22)
    at async Module.parseMultipartFormData (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/server-runtime/dist/formData.js:51:17)
    at async action (/Users/ryan/projects/remix-cloudflare-template-test/app/routes/_index.tsx:45:20)
    at async Object.callRouteActionRR (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/server-runtime/dist/data.js:35:16)
    at async callLoaderOrAction (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/router/dist/router.cjs.js:4151:16)
    at async submit (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/router/dist/router.cjs.js:3505:16)
    at async queryImpl (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/router/dist/router.cjs.js:3463:22)
    at async Object.queryRoute (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/router/dist/router.cjs.js:3432:18)
    at async handleDataRequestRR (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/server-runtime/dist/server.js:122:20)
    at async requestHandler (/Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/server-runtime/dist/server.js:94:18)
    at async /Users/ryan/projects/remix-cloudflare-template-test/node_modules/@remix-run/dev/dist/vite/cloudflare-proxy-plugin.js:70:25

I’m guessing there’s an easier way to provide an uploaded file to the put method. Does anyone have suggestions? Seems like a vary basic use case of R2 API from Pages.

Thank you!
Ryan