Это видео недоступно.
Сожалеем об этом.
How I added S3 Image Uploads to my Next.js App (using tRPC)
HTML-код
- Опубликовано: 14 июл 2022
- Sharing how i setup an s3 bucket to allow users to upload images to a secured s3 bucket and display those secured images on the page.
------------
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/codyseibert/youtube
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 :)
Can you provide me source code plz 🙏
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!
nice video. i use gcs but this video explained everything
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
That’s cool! Just me, but I would wrap that remove button in a div and add class name=“absolute bottom-2 right-2” or “justify-end items-end p-2” something to get them all aligned if the images aren’t the same sizes. Really awesome, been wonder how to do content delivery from S3
Thanks for this tutorial, could you make a video about how to setup s3 bucket in the project?
🤯🤯 great stuff!
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
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!!!!
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.
if the image is something any user could see, I'd just give it public access and store it in a non-private bucket.
amazing
Appreciated
What if I've multiple files, what approach would I apply?
generated signed url is not working with nextjs Image component. ? is there a way to fix this issue?
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.
really nice. How did you find all the info? I find the amazon web services dashboard to be a maze of information :D
just managed to hack at it and find solutions other people made lol
@@WebDevCody Thank you! I somehow think that people who just find their way through mazes of options were somehow born that way :)). Good to hear we're more alike thank different
do you keep the images in database even if the signed url isn't used? Or do you delete the unused ones later?
I store images in s3
@@WebDevCody Sorry for being unclear. What I meant was what happens if the "id" you created in database isn't used?
You always create a new record in images table (prisma.image.create), but let's say presigned URL was never used/POST threw an error etc. The id in database would direct to a non-existent image.
How would you prevent this, or you just leave those image records to stay in database?
Great
Is this available on GitHub?
Do you have a github link for this project? Would love to give it a read through
At 9:39 you map over the images and add the url before returning it to the client. The recorded video crops off the code and I'm too new to know how to continue. I have spent at least an hour looking through your GitHub and can't find the code..
It should be images.map( async (image) => {
What exactly is this part of your code doing:
for (const name in data){
formData.append(name, data[name])
}
Taking all the data from the signed upload response and putting it in a form data object so that s3 will accept it
Great video
You should switch to trpc v10 for the next video though. This video will get stale soon
Can you git this code plz
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?
You could, but that’s sending a file to a server (costs) then your server sends the same file to s3 (more network costs). If you can upload directly to s3 then cut out the middleman. It’s also a bit more challenging to send files to a serverless lambda which is where I usually host my apis
Can you plz 🙏 provide me source code
God job ! Can you give us the direct link to the github project?