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

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

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

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

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.

Thank you sir! Just what I needed.

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

I was searching so much for this! 🤓

omg the timing is soo good

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.

You are @unique Tom!❤

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

Thank you!

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

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

thank you

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

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?

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

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?

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?

Please make a video on aws sdk v3

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

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?

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

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.

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

legend

@kin1763

6 ай бұрын

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

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

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?

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

@DilwarHossainNoorChandan

11 ай бұрын

Still you have to use an server like jsonapi

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

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/*

0:09 lol

@TomDoesTech

Жыл бұрын

haha i thought it was funny

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

@TomDoesTech

2 ай бұрын

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

How can we make your application running? Thanks.

@TomDoesTech

Жыл бұрын

yarn dev

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

@TomDoesTech

2 ай бұрын

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

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?

Can you make a next.js app router version?

@TomDoesTech

2 ай бұрын

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

Awesome

What terminal are you using?

@TomDoesTech

Жыл бұрын

warp

@adrianooo3658

Жыл бұрын

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

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.

Chatgpt writes better code lol

@TomDoesTech

2 ай бұрын

Good one

@JulianA-rm4ry

2 ай бұрын

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

@TomDoesTech

2 ай бұрын

@@JulianA-rm4ry what?

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