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

Check out Uploadcare here: https://bit.ly/3SqqUkW (paid sponsorship)
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs

Hi, I’m Wesley. I’m a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication here: https://bit.ly/3QOe1Bh

👉 NEW React & Next.js course: https://bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: https://bytegrad.com/courses/professional-css

👉 Discord: all my courses have a private Discord
🔔 Email newsletter (I highly recommend you sign up to stay updated): https://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