React / Next.js Image Uploads (EASY!) - CDN, WebP / AVIF, Signed Uploads, Webhooks, Uploadcare

Рет қаралды 9,078

Күн бұрын

How to do image & file uploads the easy way. All-in-one solution: UI-widget, CDN-delivery, image optimizations (webp / AVIF, resizing and cropping, retina), validation, webhooks, signed uploads, and more. Check out Uploadcare here: bit.ly/3SqqUkW
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication here: bit.ly/3QOe1Bh
👉 NEW React & Next.js course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord
🔔 Email newsletter (I highly recommend you sign up to stay updated): email.bytegrad.com
⏱️ Timestamps:
0:00 Problems with image uploads
0:53 Image gallery overview
1:17 Add uploader widget
3:37 CDN + WebP / AVIF format
4:57 Customize uploader widget
6:10 TypeScript support
7:21 Display image after upload (upload-finish)
12:08 Display image after done (done-flow)
13:48 Reset uploader widget UI
14:59 Transformations (format)
15:42 Transformations (quality)
16:25 Transformations (preview)
17:11 Transformations (resize)
17:18 Transformations (scale_crop)
17:50 Responsive images
18:36 srcSet
19:22 Next.js Image (+ custom loader from Uploadcare)
20:30 Webhooks (database)
22:08 Signed uploads
#webdevelopment #programming #coding

Пікірлер: 27

@ByteGrad 3 ай бұрын

Hi everyone, Uploadcare is a great all-in-one solution for image / file uploads. Check them out here: bit.ly/3SqqUkW

@clipartinc 3 ай бұрын

Would be great to see this without using a third party service. Thanks for your videos!!

@alaeddinemenai5380 3 ай бұрын

Thank you Byte Guard for your videos. You are the top KZfaqr who covers the Next’s ecosystem. I checked your videos but I didn’t find if you talked about PDF generation/download in NextJS. This is rare topic I guess.

@maskman4821 3 ай бұрын

Thank you for introducing this amazing fileupload service to us ❤

@vadlamudivamsi2923 3 ай бұрын

Excellent is very easy when using Uploadcare.

@adilhasan9943 3 ай бұрын

it was really amazing 🎉

@sanjoyrakshit842 3 ай бұрын

I currently use cloudinary in my project can you tell me which one is good between this or cloudinary

@jakubsiekiera8098 16 күн бұрын

Is it possible to somehow fix the flickering of this component? I know it's client side and we could maybe provide a parallel route with loading.jsx with a fake upload button which would serve as a static component on the page load, but this sounds like not an elegant fix.

@404-not-found-service Ай бұрын

Thanks

@alexdin1565 3 ай бұрын

please can you make a video about search on sever actions

@janphillipdacallos4214 13 күн бұрын

hello I am having a hard time at 8:31. I mine is not showing the data in console right after the upload of photo

@leojan7390 3 ай бұрын

Really impressive library! However I think I won't use it with the free plan, as it's quite limiting from what I read, but if I had some money to invest I would get a paid plan without hesitating, it's a great service! And for small personal projects, the free plan is definitely more than enough

@aafawfawfawf6272 3 ай бұрын

Looks like a great service but I can't help but think that a custom solution with Cloudinary as CDN would be a more feasible given their pricing ($80 per month)

@radharaji4153 3 ай бұрын

Hi @bytegrad is there a way to send the state data from client react component to server side page/component in next js application. Kindly let me know what are the ways we have to get updated state

@ByteGrad 3 ай бұрын

There are many options: server actions, route handers, put it in the URL as query params and then use the searchParams prop in the page component

@radharaji4153 3 ай бұрын

@@ByteGrad okay thank you

@radharaji4153 3 ай бұрын

@@ByteGrad hi actually I have multiple pages with AppRouter next js application. How to preserve all the state data when we navigate from one page to another via router

@0x-003 3 ай бұрын

can you make more beginner guides for next.js please.

@sergeishmelev8000 Ай бұрын

How to implement file storage without third-party services?

@Josedld7 22 күн бұрын

Does Uploadcare work for PDF files?

@exerge9202 3 ай бұрын

Hello, can you please do a video on next auth v5. Not just google login, maybe google + passwordless and then how to store data related to user such as credits for example or profile picture etc. Thanks so much for your videos