Use Presigned PUT URLs to Easily Upload Files to AWS S3

Theo's Tweet: / 1564019039877271552
Repository: github.com/TomDoesTech/pre-si...
0:00 Intro
0:43 Data flow
1:45 Bootstrap application
2:33 S3 bucket setup
5:07 Get PUT URL handler
10:36 Form
15:24 Does it work?
🌎 Follow me here:
Discord: / discord
Twitter: / tomdoes_tech
Facebook: / tomdoestech​
Instagram: / tomdoestech​
TikTok: / tomdoes_tech
☕ Buy me a coffee: www.buymeacoffee.com/tomn

[@arihantjain3274]

You saved me! I have been struggling for signed urls for a long time. You gained a subscriber 😊

[@d2vin]

Been needing this exact video lately. This community is on point.

[@Dinicorps]

I am literally creating a T3 webapp where you can upload then search for images, using S3 for storage. This was a life saver, having tried to handle the uploading server side, through a tRPC route and facing a bunch of issues and it feeling so hacky. Thanks heaps

[@NateMunk]

Thank you! I was running into a cors issue for a while, following your tutorial helped me do it right!

[@lexsemenenko7044]

Laughing out loud. I've been trying to figure this out for weeks. Absolute gem find.

[@user-wy6hg9ej6f]

I am here after 30 days of dying to figure this out

[@Ilovallcats]

I was searching so much for this! 🤓

[@greidinger-reis]

Great video, I was looking to do exactly this from a trpc/prisma project, and it was a pain to figure it out, sad that i didnt have this tutorial. Something to note is that in this tutorial you use an outdated version of aws sdk, and the steps for the new version might be a little different.

[@matthiasraemdonck]

Thank you sir! Just what I needed.

[@namesare4fools]

omg the timing is soo good

[@tharinda]

Thanks for the content. I was struggling for 2 days and then just realised I was keep trying to upload the whole form instead of the file object via axios.

[@kirakira160]

You are @unique Tom!❤

[@zindev]

Thank you for this guide. I wouldn't imagined it was that easy. Could you show us how to process these images too? Awesome teacher!

[@TomDoesTech]

You can use something like Sharp to process them, it's fairly easy to use

[@wiqqi7950]

The Best Explanation !!! I referred to many videos , but out of all tNice tutorials was the best I could find among all .... Also got to know many tNice tutorialngs

[@Ca3yMiX]

Thanks for the video, can u please make a tut about how to make a server side pagination with prisma 🙌

[@albert21994]

Thank you!

[@nikunjchaudhari8129]

your videos always helps me.!, can you please create videos for node js microservice with type script.?

[@yesphoneacessoriosparasmar8334]

Hello, your tutorial is very good! I have a question regarding security with the aws key in the env file. Is this a security issue?

[@VVVXXXI]

Thanks man, help me to find a way to produce a extension when we do a pre-signed url.... !!

[@jmigsan]

thank you

[@Motivos77]

Great video. I have a need where i want to allow people to upload any file and type. How can i create a presigned URL when i don't know and don't care what the file will be?

[@jaitjacob]

can this be modified to upload large video files to the bucket? and if so, is there a technique to also show the progress of upload considering it might take anywhere between tens of mins to hours for a large file upload to complete?

[@kin1763]

legend

[@kin1763]

actually, I realised it doesn't really work well on the app router on next 13 and above

[@semyaza555]

0:09 lol

[@TomDoesTech]

haha i thought it was funny

[@abhayvgg]

So if I want to format or compress my image to webp for example then I should first do it on the client side them request a signed URL and upload it? Great video BTW, Love your content as always

[@TomDoesTech]

I would send it to the server, do the conversion, then upload it to S3

[@abhayvgg]

@@TomDoesTech i thought of doing this but my concern is that we have 15 sec of runtime for a lambda function and what if my image takes longer than that to format in worse case scenario?

[@_laxman_vijay]

You could upload it to s3 using presigned url and then post process and compress the image asynchronously using eventbridge and lambda

Could You redo the tutorial with Next.js13, and DigitalOcean spaces that use AWS s3 system. I have a hard time with the CORS error on PUT request.

[@okeyshourovroy2769]

Please make a video on aws sdk v3

[@brandonjones2812]

You created environment variables for your access keys, but it doesn't look like you ever directly used them. Are they utilized behind the scenes by the getSignedUrl function to generate it?

[@alirezahaghshenas8066]

I'm struggling with uploading file by S3 in backend. Handling it in frontend seems easier but it safe to upload in frontend??

[@BasilHajYehia]

Isn't this a bit of a security risk because the aws access key id is located in plain-text in the presigned url?

[@allisfehr]

Is this true?

[@mayanksharma6927]

I wonder why you put that upload function outside of the react function

[@devdwr9208]

Can we stream videos that are located in our S3 bucket in our nextjs app?

[@TomDoesTech]

That's a good question and would be a cool video, I'll look into it

[@PTBKoo]

Was wondering if it would be possible to upload a json file and use that json file as an api?

[@DilwarHossainNoorChandan]

Still you have to use an server like jsonapi

[@steventabango4790]

I am having AccessDenied Access Denied What am I missing? You didn't create any policy beside the cors.

[@d2vin]

Interesting, I tried to upload a music file (.m4a), but then the req.query.fileType turned to x-m4a, instead of remaining at m4a, leaving the uploaded aws file unplayable. This seems to be a naming issue only though, because when I change the file name I can play the uploaded audio file. m4a is an apple format so I'm pretty sure that has something to do with it. thoughts? Otherwise great video! so much important stuff with devtooling in such little time. would like to see info on pulling s3 links to be used as data in next js + trpc

[@TomDoesTech]

Yeah, you need to check and format the mime types correctly, I left that out of this video to keep it focused on the PUT request

[@d2vin]

@@TomDoesTech ooh ill try audio/m4a, i was doing audio/*

[@umarmuhammadzakari4585]

Awesome

[@valentinbegnis]

What if I want to upload an image and I want to add some user defined metadata?

[@TomDoesTech]

You can send the data along with the request to make the pre signed url

[@maxmurakami-moses4728]

Can you make a next.js app router version?

[@TomDoesTech]

Yeah, I've been working with it a bit lately so I could maybe do something

[@allanchamon4765]

How can we make your application running? Thanks.

[@TomDoesTech]

yarn dev

[@euanmorgan5847]

Is there any way to make a presigned URL that we can upload multiple files to?

[@TomDoesTech]

I'm not sure tbh, you can make multiple URLs. I was going to show that in this video but didn't want to overcomplicate it

[@euanmorgann]

@@TomDoesTech Thank you :) Yeah I think I’m going to just make multiple URLs, my use case is uploading 10+ photos from a mobile app so was hoping there would be an easier option

[@TomDoesTech]

@@euanmorgann I think this is fairly easy and probably faster. You can open 10 connections and use promise.all to kick off all the network requests are the same time.

[@catalinaRhr]

@@TomDoesTech Thanks for the tutorial! I have the same question and I don't know where tu put the promise.all. Should I map all the files before generating the signedUrls? Would I do that on the client side? If so, how can I get the unique keys?

[@user-lq6xm4uu3n]

the image only downloads, but doesn't open in browser. why?

[@TomDoesTech]

I think S3 returns it with a header that tells the browser to download it, not sure.

[@adrianooo3658]

What terminal are you using?

[@TomDoesTech]

warp

[@adrianooo3658]

@@TomDoesTech Thanks. Good content by the way, keep it up.

[@zindev]

How can we fetch these images?

[@TomDoesTech]

Use a signed GET request

[@zindev]

​@@TomDoesTech Thanks for answering. As all the images on my project are public, I've set the bucket as public and allow get operations for my domains. I guess I could also set a parameter in the put command to allow public read access. This would be a better way.

[@JulianA-rm4ry]

Chatgpt writes better code lol

[@TomDoesTech]

Good one

[@JulianA-rm4ry]

​@@TomDoesTech where do you look to the right every other line

[@TomDoesTech]

@@JulianA-rm4ry what?

[@d2vin]

the tutorial notes.md doesn't match the tutorial and throws a CORS error, fixed with the headers you posted

[@TomDoesTech]

What's wrong with the Notes file? It looks fine to me? Maybe it the md formatting?

[@d2vin]

@@TomDoesTech the allowed headers and allowed origin config don't have the '*'s in the notes file. not much of an issue tho, simple change and also serves as a nice base config, just doesn't allow for exact copying and pasting from the notes file into aws.

[@TomDoesTech]

@@d2vin It does have them, click the edit and the appear. It's because it's a dot md file and the * means something in md. I'll change it to txt