How I added S3 Image Uploads to my Next.js App (using tRPC)

but with DigitalOcean I have CORS problem. It wont return the Access-Control-Allow-Origin on my PUT request. In your code You don't even send a file format header. I am so pissed - it takes already several days to deal with this problem.

nice video. i use gcs but this video explained everything

Can you git this code plz

🤯🤯 great stuff!

Appreciated

What exactly is this part of your code doing:

for (const name in data){
formData.append(name, data[name])
}

Right now, you first store a row to your images table and use the ID from that row as your key for s3. I believe with this ordering, if the call to s3 fails you now have an image in your DB table but no image in S3. The correct ordering should be, make call to s3 and once that's successful, store the location or key in the DB

What if I've multiple files, what approach would I apply?

Hey! Really good video and it was really useful to me. Thank you! Do you still have the code for this ? I couldn't find it in the github repo you have in the description

Thanks for the great video! I'd also appreciate a guide on how to retrieve files and use them in an image component for example. I'm running into permissions issues, and I'm unsure how to tackle them. Do I allow all public access? Can I configure access for only my application? A discussion around this would be very helpful.

Is this available on GitHub?

Do you have a github link for this project? Would love to give it a read through

I swear everytime I need to do something you already got the video here for me to reference.
Thanks for what you do. It's allowed me to skip a lot of boilerplate of the learning process!

What a great tutorial, super clear and straight to the point. Keep killing it :)

would LOVE to see a full tutorial on how you built this. Big fan of using trpc and s3, as well as the folder structure. I'm using create t3-app but that does backend in a nextjs monorepo. i still have some confusion on how you implemented this tho, if you could send a link to the code that would be much appreciated!

Great

Is there a reason why you can't just make a post request to a server, and upload the image to s3 from the server? If it succeds then you save it to db otherwise not. Right now it looks weird to me to return a url to the client and post image from there if you already know the url, then why it isn't done on the server?

do you keep the images in database even if the signed url isn't used? Or do you delete the unused ones later?

Thanks for this tutorial, could you make a video about how to setup s3 bucket in the project?

Great video
You should switch to trpc v10 for the next video though. This video will get stale soon

God job ! Can you give us the direct link to the github project?

really nice. How did you find all the info? I find the amazon web services dashboard to be a maze of information :D

The main downside i found with s3 pr signed url is that it doesn't give any response data it just gives you status code 200 so if i want to add s3 image url to my db then i have to do it my self which is more annoying..

Good job babe!!!!