just change the method to `PUT` and it'

just change the method to

PUT

PUT

and it'll work. You'll likely want to add

If-Unmodified-Since

If-Unmodified-Since

to ensure write-once only. The rest is optional, though I would really encourage all of the headers here for various reasons.

const signed_url = await aws_client.sign(
        new Request(url, {
          method: "PUT",
        }),
        {
          aws: { signQuery: true, allHeaders: true },
          headers: {
            "If-Unmodified-Since": new Date(0).toUTCString(),
            "Origin": "http://localhost:3000"
            "Content-Type": "image/jpeg",
            "Content-Disposition": "attachment",
            "Cache-Control": "private, max-age=0, stale-if-error=31536000",
          },
        }
      );

const signed_url = await aws_client.sign(
        new Request(url, {
          method: "PUT",
        }),
        {
          aws: { signQuery: true, allHeaders: true },
          headers: {
            "If-Unmodified-Since": new Date(0).toUTCString(),
            "Origin": "http://localhost:3000"
            "Content-Type": "image/jpeg",
            "Content-Disposition": "attachment",
            "Cache-Control": "private, max-age=0, stale-if-error=31536000",
          },
        }
      );

Venkat Dinavahi•2/1/24, 2:55 PM

Thanks a lot!

So that's using aws4fetch right?

And on the client-side an XMLHttpRequest would work right?

Anything special that I would need to do on the client-side? Like does it need to set those headers again or are those already preset from the signed url?

daveOP•2/1/24, 2:55 PM

So that's using aws4fetch right?

Correct, but you could use the r2 bindings if you want

daveOP•2/1/24, 2:55 PM

And on the client-side an XMLHttpRequest would work right?

yes

Venkat Dinavahi•2/1/24, 2:56 PM

Ah I might have misunderstood the docs. We have the R2 bindings setup but I didn't know there's a function to get a signed url

Venkat Dinavahi•2/1/24, 2:56 PM

The preferred way is through the r2 bindings but there's file size upload limits I want to work around. Some of our customer upload files that are 800mb or even more in size

daveOP•2/1/24, 2:57 PM

Anything special that I would need to do on the client-side? Like does it need to set those headers again or are those already preset from the signed url?

The client side will need to set those headers

If-Unmodified-Since

If-Unmodified-Since

, , , and manually when doing the request.

You'll want to set the of the fetch to be so that the header is set automatically

Venkat Dinavahi•2/1/24, 2:58 PM

Oh maybe that's where my mistake is. I had assumed that if headers are set on the pre-signed url, the client doesn't need to send those again.

Venkat Dinavahi•2/1/24, 2:58 PM

But thinking about it now, it makes sense. It's kind of like a security check? Like headers A, B, C must match the values the pre-signed URL has set.

VVenkat Dinavahi But thinking about it now, it makes sense. It's kind of like a security check? L...

daveOP•2/1/24, 2:59 PM

exactly.

daveOP•2/1/24, 2:59 PM

signing the origin is a really good trick to prevent abuse.

Venkat Dinavahi•2/1/24, 3:00 PM

Ok this has to be it. I need to set the client headers to match the pre-signed url. Thanks!

Venkat Dinavahi•2/1/24, 3:01 PM

I do wish Cloudflare provided more plug-n-play examples. There are too many deatils open to interpretation in the docs!

daveOP•2/1/24, 3:02 PM

AWS4-HMAC-SHA256 is quite interesting

not the best security protocol (as it requires storing the secret key in plaintext, no way to hash it), but it's very flexible.

daveOP•2/1/24, 3:02 PM

you can sign any header you want

daveOP•2/1/24, 3:03 PM

most libraries don't support creating presigned URLs with more than the "normal" headers signed, but thankfully aws4fetch does!