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

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
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
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

[@ByteGrad]

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

[@clipartinc]

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

[@alaeddinemenai5380]

Thank you Byte Guard for your videos. You are the top RUclipsr 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]

Thank you for introducing this amazing fileupload service to us ❤

[@adilhasan9943]

it was really amazing 🎉

[@vadlamudivamsi2923]

Excellent is very easy when using Uploadcare.

[@sanjoyrakshit842]

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

[@alexdin1565]

please can you make a video about search on sever actions

[@jakubsiekiera8098]

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.

[@sergeishmelev8000]

How to implement file storage without third-party services?

[@janphillipdacallos4214]

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

[@radharaji4153]

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]

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]

@@ByteGrad okay thank you

[@radharaji4153]

@@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]

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

[@aafawfawfawf6272]

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)

[@404-not-found-service]

Thanks

[@user-wr7ou8ih5s]

Why use external solutions ?
Is there an issue with the project forlder or db ?

[@jotaroisdarius1918]

You don't wanna store images inside your db, it's slow

[@Josedld7]

Does Uploadcare work for PDF files?

[@exerge9202]

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

[@leojan7390]

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

[@fync7514]

dear mr grad, tolong buatkan video tutorial drag and drop dnd dong dengan next js 😁😁🙏🙏

[@yashgupta-rs9ro]

It would be helpful, if you provide the boilerplate code as well.

[@ByteGrad]

Yep, will add the code soon

[@alvaroaquije2572]

I think I still prefer uploadthing