How I Upload Images to CloudFlare R2 in Next.js Server Components (Presigned PUT)

[@MadTofan]

This video is a life saver. Been stuck for a really long time with this, but after solving the issue, I noticed some of my uploads had failed due to CORS issue. turns out it was because my key in command had a space (I was relying on the file name to define the object key). I ended up generating a uuid for the object key instead.

[@coolvibes-nj2cc]

I am also stuck bro. do you mind sharing your code here?

[@MadTofan]

@ i just followed the code in the video here. Except for the file key, I used uuid to always have a new unique one

[@Next-Js]

Thank you, your content helps me a lot, keep it up, cloudflare is great for me!

[@abhishekbarkade5955]

Love you man! I was facing issue to connect with client from my node app for an whole day, found solution to my issue in few minutes only. Thank you so much 🙇‍♂

[@ckhicks]

Thanks mate, this was helpful!

[@V0LAT1LE_]

Tom: There won't be many tutorials on this channel anymore Also Tom a few days later: Makes Tutorial*

[@TomDoesTech]

This isn't really a tutorial. This is the kind of video I'll be making in the future

[@V0LAT1LE_]

@@TomDoesTech thats great man 😃

[@Kevinisyoung]

Thank you very much for making this video

[@andreik917]

Could you share repo with the example ?

[@naylord5]

Thank you Tom for this useful video! 🔥🔥 Could you please consider extending this with a multi file upload with individual progress? It would be a game changer for me.

[@TheAliAhad]

Thanks, It would be great to make a tutorial about D1 also.

[@eip408]

awesome tuts, thanks Tom 🙌! just got into some issues although I can successfully store the image into my bucket, but I cannot get the src itself and keep getting that xml error response edit: fixed the issue, just need to do the GetObjectCommand to retrieve the images after putting it to the bucket

[@TomDoesTech]

@@eip408 you can either make the bucket reads public, or do the signed get request

[@eip408]

​@@TomDoesTech ohh I see, thanks Tom and appreciate for the quick response

[@Its-InderjeetSinghGill]

Hey, really liked this video. I have one question, What if we need to upload multiple files do we need to create multiple signed urls for that?

[@TomDoesTech]

Yeah, I think you have to make multiple URLs. I haven't done it to be honest so I'm not sure

[@eddyhernandez2475]

3600 seconds is an hour haha 12:57

[@TomDoesTech]

I was thinking it was ms

[@regilearn2138]

How to upload files to the aws s3 bucket using lambda functions

[@PsychoDude]

in express

[@Tboy_ty]

Your font is small...kindly try to enlarge next time...thank you for all you do.

[@reqtified]

Sadly, I just get CORS issues doing this, even with a custom domain.

[@TomDoesTech]

@@reqtified you're either using the wrong creds or haven't setup the cors policy. I did show what to do if you get that in the video

[@reqtified]

@@TomDoesTech totally me, sorry. It ended up having a ';' on the bucket name at the end!! Been debugging for days and only have just found it!! urgh, one of those ones XD

[@PremJethwa-qj2mp]

Hi Tom Thanks for such a helpfull video, I'm Facing one issue while accessing the image in FrontEnd using the Token (ReadOnly access) Here is how I'm call export const fetchMedia = async (url) => { const token = "myToken"; // Replace with your actual access token try { const response = await axios.get(url, { method: "GET", headers: { Authorization: `Bearer ${token}`, }, }); if (!response.ok) { console.error( `Failed to fetch media: ${response.status} ${response.statusText}` ); console.error("Response details:", await response.text()); throw new Error(`Failed to fetch media: ${response.statusText}`); } const blob = await response.blob(); const mediaUrl = URL.createObjectURL(blob); return mediaUrl; } catch (error) { console.error("Error fetching media:", error); return null; } };

[@TomDoesTech]

Why do you need to fetch the image on the frontend? I don't understand