Тёмный

This is how I like to do image uploads on my full stack apps 

Web Dev Cody
Подписаться 237 тыс.
Просмотров 38 тыс.
50% 1

github.com/web...
📘 T3 Stack Tutorial: 1017897100294....
🤖 SaaS I'm Building: www.icongenera...
💬 Discord: / discord
🔔 Newsletter: newsletter.web...
📁 GitHub: github.com/web...
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

Опубликовано:

 

1 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 67   
@baybay1234
@baybay1234 Год назад
I have always been wondering what the process of uploading images via presigned url looks like, this has helped me understand the logic behind it. Thank you for the video!
@Flash136
@Flash136 Год назад
The only problem with uploading directly to S3 is you can't validate the file type of what's being sent. S3 just checks if your sending the correct headers, but the actual file type of the file is not being checked.
@WebDevCody
@WebDevCody Год назад
Yeah, I could see that being an issue, but how would you verify it’s the correct file type anyway?
@Flash136
@Flash136 Год назад
@@WebDevCody If the code is running on a serverless function, the solution I've seen is to first save the file to ephemeral storage. Then, check the file type of the file uploaded in there. If the file type is valid, the Lambda can upload it to S3.
@kuroisan2698
@kuroisan2698 Год назад
cant you give the input the files types should be accepted?
@Flash136
@Flash136 Год назад
@@kuroisan2698 Yes you can, but that's all client-side validation. So nothing's stopping someone from editing the HTML, and allow themselves to upload whatever they want, including malicious files.
@itaquito6308
@itaquito6308 Год назад
But how do you know the type of the file on the lambda function?
@takundahwaire2539
@takundahwaire2539 6 месяцев назад
This works but what happens when the client is facing some connectivity issues and the upload fails?? I see you’re saving the object id in your DB before sending back the postpresigned url
@abdirahmann
@abdirahmann 11 месяцев назад
how do you compress images of different sizes to a "standard" size of about 50KB for fast loads?
@WebDevCody
@WebDevCody 11 месяцев назад
i use Next.js which has an
@abdirahmann
@abdirahmann 11 месяцев назад
@@WebDevCody that's great, what about if its an SPA?
@yousafwazir3167
@yousafwazir3167 Год назад
Try more mr beast style thumbnails with more surprise faces
@WebDevCody
@WebDevCody Год назад
yeah, I may just take a bunch at the same time and rotate
@gizemavcs8599
@gizemavcs8599 2 месяца назад
Why don't we do this directly on AWS? Easier, right? Create an endpoint with Api Gateway and connect to the lambda function. The Lambda function then distributes the files to the S3 bucket. It's really easier than your method.
@Metachief_X
@Metachief_X 3 месяца назад
I created an image upload component but it doesn’t upload image files from mobile devices like iOS properly. What can I do to make sure iOS images are being uploaded properly?
@WebDevCody
@WebDevCody 3 месяца назад
That’ll be hard for me to help you debug over RU-vid comments like what is the error that you’re getting?
@spyroninja
@spyroninja Год назад
If I may be so bold as to suggest a different font for your thumbnails; the current one is very comic sans, which is very triggering for many lol.
@WebDevCody
@WebDevCody Год назад
haha sure, I can look into different fonts
@cimsir_tl
@cimsir_tl Год назад
Do you think using vercel storage for personal projects built with nextjs is a good choice ? Having everything in one place seems good and safe for me like deploying, db, file uploading etc.. What do you think?
@WebDevCody
@WebDevCody Год назад
vercel storage has a size limit on their files... I can't find where it is, but it's small, like 3 mb limit on files. So no, I wouldn't use it unless you know you're just storing small user uploaded images.
@brandon-t7s
@brandon-t7s Год назад
Good timing, I was about to do something similar with S3 today (which I have never user before) so this has helped!
@gadgetboyplaysmc
@gadgetboyplaysmc 4 месяца назад
Going back to this vid because I remember you mocking S3 locally, thanks!. I tried localstack---it removes the files when the docker container stops. Kinda wasted my time there.
@simplehonestmusic2261
@simplehonestmusic2261 10 месяцев назад
Hi Cody, One thing I'm wondering about is image compression. I'm wanting to build something like a photo album where users can store potentially hundreds of photos. For this kind of thing, wouldn't I want to put some kind of API between the upload button and the S3 bucket to compress the image files before storing them in the S3 bucket? That way the app/website would be receiving compressed images when I fetch them from the database?
@WebDevCody
@WebDevCody 10 месяцев назад
For that I’d probably just put cloudfront and set s3 as an origin. There is a way to have all assets automatically be gzip encoded before they are sent back to the user
@liu-river
@liu-river 5 месяцев назад
Have you figured out a solution? I have the same problem but I am thinking of just using HTML canvas.
@simplehonestmusic2261
@simplehonestmusic2261 5 месяцев назад
@@liu-river I'm actually using Cloudinary right now and really enjoying it. S3 might be cheaper, but Cloudinary is waaay easier, and their free tier is pretty good
@mrbjjackson
@mrbjjackson Месяц назад
I just implemented something like this using browser-image-compression npm package. I learned about it in this vid ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-87JAdYPC2n0.htmlsi=9NjDY9u3xTVlmoBL
@randy4443
@randy4443 7 месяцев назад
What do you think of using public s3 bucket for image uploads?
@Hiperultimate
@Hiperultimate Год назад
Hey I asked this question in your last livestream and you made a video of it. Even though it might not be the main reason, ill still say this. Thanks a lot! :D
@WebDevCody
@WebDevCody Год назад
haha idk if it was you, I just got caught up in this image upload on the stream I figured I'd redeem myself by making a video when I figured it out.
@Hiperultimate
@Hiperultimate Год назад
@@WebDevCody Glad you did xD
@akahades11
@akahades11 Год назад
what's your vs code theme its really cool
@WebDevCody
@WebDevCody Год назад
bearded theme
@akahades11
@akahades11 Год назад
@@WebDevCody thank you
@kuroisan2698
@kuroisan2698 Год назад
why 99% of devs use AWS even they say they have a horrible experience with it have you ever tried something like Google cloud storage or whatever ?
@WebDevCody
@WebDevCody Год назад
because my project at work requires it, so I'll just stick to it since knowing it pays me well
@cimsir_tl
@cimsir_tl Год назад
Hi, i wonder how you get this quality with macbook in 1080p. I am using 2019 macbook pro but when i try to record a video in 1080p the quality become very low. I am using OBS to record videos.
@WebDevCody
@WebDevCody Год назад
I just record my native screen resolution and output 1080p. I don't have anything else special from what I know
@LeighBriody
@LeighBriody Год назад
Hey Cody , great video , if possible could you sometime show us a video on how we can set up a dev database within our t3 stack so we can work on adding new features without effecting prod data ?
@AhmedOmar-ib3yn
@AhmedOmar-ib3yn Год назад
Hello, if I may ask, what would it cost to host a vidoe course website? how much would it cost? say it can support like 1000 concurrent users all watching videos
@WebDevCody
@WebDevCody Год назад
I’d go to the s3 pricing page and determine how much it’ll cost for 1000 people to download your video, 1000 * sizeOfFile / cost per gb bandwidth
@AhmedOmar-ib3yn
@AhmedOmar-ib3yn Год назад
@@WebDevCody thanks for the answer.
@siya.abc123
@siya.abc123 Год назад
Thought you will be showing us Theo's uploadthing package
@WebDevCody
@WebDevCody Год назад
no, I haven't tried it yet. I personally will stick to s3, but I'm sure his solution works fine.
@AdeaduraAdegbite
@AdeaduraAdegbite Год назад
web Dev Cody have you heard of uploadthing by theo
@WebDevCody
@WebDevCody Год назад
yeah, I wanted to try it out, but I've done s3 image upload myself multiple times in the past, so I'm not sure I need a third part service to manage my image uploads. But I'm happy he is working on a saas product that seems useful!
@nested9301
@nested9301 Год назад
cloudinary?
@mattfuller4257
@mattfuller4257 8 месяцев назад
This is super helpful, thanks.
@PausePlayRepeat
@PausePlayRepeat Год назад
Banger video as always Cody!!
@z-aru
@z-aru Год назад
Good insight, thank you
@rust2411
@rust2411 Год назад
great stuff thanks!
@justine_chang39
@justine_chang39 Год назад
Exactly what I needed
@karlapple7275
@karlapple7275 Год назад
God sent 👏👏👏
@name_less227
@name_less227 Год назад
Babe. When can we expect a Laravel TALL stack tutorial? ❤
@WebDevCody
@WebDevCody Год назад
Never lol, I don’t use php
@SeibertSwirl
@SeibertSwirl Год назад
The nameless babe 😩🥰
@name_less227
@name_less227 Год назад
​@@WebDevCody Come on now.. Not even dabble a bit in PHP? You won't regret it.
@hellomukit
@hellomukit Год назад
What is the name of that vscode theme?
@WebDevCody
@WebDevCody Год назад
bearded theme
@SeibertSwirl
@SeibertSwirl Год назад
I love you! Keep it up babe ❤
@WebDevCody
@WebDevCody Год назад
😘 thanks babe!
@kuroisan2698
@kuroisan2698 Год назад
but why you are uploading files from the client is not better to just upload it from the server ? and I believe file uploading to S3 from the server doesn't cost that much It won't make that problem if you will need it to upgrade ur server it's most likely cuz of another thing isn't it ?
@WebDevCody
@WebDevCody Год назад
If you upload from client -> server -> s3, that’s 2x the bandwidth used, and much slow for your users. Lambda also has time limits so if your upload files are large (I plan to do course video files), they will most likely timeout on your lambda. So I personally upload directly to s3
@xtrange2152
@xtrange2152 11 месяцев назад
Very useful, if you dont mind can you make a video that show the screen sharing functionality. I been doing a discord clone app and havent figure that out yet thx.
Далее
Did Theo Really Fix File Uploading?
8:39
Просмотров 19 тыс.
A YouTuber Stole My Project (And I'm HYPED)
15:13
Просмотров 47 тыс.
Uploading Files With Next.js Just Got Way Easier
12:20
Brutally honest advice for new .NET Web Developers
7:19
The Better Way to Load Images
8:46
Просмотров 48 тыс.