Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

React/Next.js Image Uploads - CDN, WebP/AVIF, Signed Uploads, Webhooks, Uploadcare

ByteGrad via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to implement efficient image uploads in React and Next.js applications using Uploadcare's comprehensive platform. Master the integration of an uploader widget that automatically handles CDN delivery, modern image formats like WebP and AVIF, and advanced customization options including TypeScript support. Explore image transformations for format conversion, quality optimization, resizing, and scale cropping while implementing responsive images with srcSet for optimal performance across devices. Discover how to display uploaded images using both upload-finish and done-flow events, reset the uploader widget UI programmatically, and integrate with Next.js Image component using custom loaders. Understand webhook implementation for database integration and secure your uploads with signed upload functionality to prevent unauthorized access and ensure data integrity.

Syllabus

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

Taught by

ByteGrad

Reviews

Start your review of React/Next.js Image Uploads - CDN, WebP/AVIF, Signed Uploads, Webhooks, Uploadcare

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.