How to upload images to CloudFlare R2 in Next.js

My Products
🏗️ WDC StarterKit: wdcstarterkit.com
📖 ProjectPlannerAI: projectplanner...
🤖 IconGeneratorAI: icongeneratora...
📝 ThumbnailCritique: thumbnailcriti...
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.web...
📁 GitHub: github.com/web...
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@SeibertSwirl]

Good job babe! Love ya!

[@MohamedElguarir]

WTF

[@SeibertSwirl]

@@MohamedElguarir it’s ok. I can say that to him, I’m his parole officer.

[@WebDevCody]

Thanks babe love you!

[@ianfrye8988]

Ayeeee you got it figured out. Great video my friend

[@kevinma5065]

fantastic tutorial cody! would love to see a follow up related to image optimization, as Vercel's Image optimization becomes prohibitively expensive very quickly!

[@MohamedElguarir]

what about timeouts, bigger files ? I think using presigned uploads are much better + you'll save bandwidth ==> saving you $$

[@WebDevCody]

Yes, on larger files you’d want a presigned url. The issue I have with presigned urls is that it exposes your bucket name and anyone can ddos your bucket and run up a large bill. Also with R2 there isn’t a way to limit file size, so technically someone could just keep uploading huge files to your bucket.

[@essaadi_elmehdi6784]

Great video, thank you for sharing You did the ref stuffs to reset the file input after a successful upload, because there is no way to reset it than making it's equal undefined using the ref

[@WebDevCody]

I can’t figure out a way to reset the file input without a ref 🤷‍♂️

[@Tenseic]

Wouldn’t it be better to create presigned urls and let the user directly upload to the bucket?

[@WebDevCody]

Yes, I thought that as well until I learned anyone can ddos your private bucket and you’ll be charged a lot of money. This gives you more control over abstraction away the bucket and also prevents the scenario where someone uploads files but the second part of the request never goes through causing orphaned files

[@sameerahmedk]

Have you considered react form libraries? Because I recall reading the docs and they mentioned that custom forms cause unnecessary rerenders so better to use a library that tackles that. Would love to hear your thoughts if you've looked into it and still chose this approach

[@rafamuttoni]

interesting how you organize some parts of the application logic in this "use-cases" folder, have you talked about that in any recent video?

[@WebDevCody]

It’s related to clean architecture or layered architecture. I think I have a few videos about it.

[@sumitpurohit8849]

I wonder if this can affect the vercel's bill by sending the entire file to api route. Instead can we just generate the presigned url and send it to client and upload the file from there.

[@joshuaroland9876]

I have tried doing this and still vercel doesn’t let me upload larger files. I’ve been thinking of creating my own node server instead

[@Yusuf-ok5rk]

@@joshuaroland9876 you will be serverless and you will be happy

[@hashgraph1832]

​@@joshuaroland9876you can upload large file, using presigned url

[@pawixu]

Yes, it affects the bill. There's a better way, most data storages allows to create signed/presigned upload url, which you generate on your server, then send it back to client and then client uploads the file to bucker/r2.

[@WebDevCody]

I’m not deploying to vercel, but yes you’d probably most definitely want a presigned post to your bucket directly to save on bandwidth

[@WebDevCodeCrush]

I am curious why you opted for this storage service. As a starter kit might it be a more simple and upload efficient option to use something like UploadThing? The only options I’m familiar with are Upload Thing, Cloudinary, and the Convex storage so I’m truly interested in your reasoning and thought process.

[@WebDevCody]

For storage, you won’t get as close to “free” than with S3 or R2. Almost any production application I know uses S3 for storing files. Convex even uses s3 behind the scenes, they just abstract it away. I’m pretty sure upload thing also uses s3.

[@WebDevCodeCrush]

@@WebDevCody Yes, I figured S3 was the case. Most of my projects are very small, either test cases or hobby projects so the simplicity of upload thing or convex is easy, but at large scale would probably go directly to S3 once I was comfortable with it.

[@yunyang6267]

It would be nice to add a functionality to crop the image to a certain size

[@JediMediator]

I come from express and got used to needing multer for any upload needs. Why don't you need it here?

[@joshuaroland9876]

Thank you so much for this video. I tried to do this by uploading multiple images and videos but somehow I can’t do that when I deploy to production because of vercel’s body limit size. Even after trying presignedURLs, I still get the same error. From your experience, do you think creating an external nodejs server for this would solve the issue?

[@WebDevCody]

A presigned url shouldn’t have an upload limit, or if it does it’s a few GB. I’d try that again.

[@joshuaroland9876]

@@WebDevCody thank you so much for the reply. I’ll implement this night again. Maybe I was doing it wrong before. Had to follow your image gallery video with next-cloudinary as an alternative. Your videos really help me 🤩🤩

[@pawixu]

@@joshuaroland9876 just make sure that you upload files to presigned url using client. You can do it 🤛.

[@joshuaroland9876]

@@pawixu thank you. I’ll return here once I get it sorted🦾

[@griffadev]

Meme type 😂 love it

[@vickoalan]

sorry, but I think this is not a good way, using resigned URLs is the best way, What if the size of the image is too big ?