👉 ImageKit’s free plan (sponsored): https://bit.ly/40KsF1D 
👉 Also view how to STREAM videos in React / Next.js: https://youtu.be/jHVDnbuB23k
👉 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 auth and more https://bit.ly/3QOe1Bh
👉 Work with me: support@bytegrad.com

👉 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

👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com
👉 Email newsletter (BIG update soon): https://email.bytegrad.com
👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 Demo
02:05 Client-side vs Server-side uploading
02:42 Input type=file
03:10 Next.js SDK from ImageKit
07:21 Upload video
07:54 Video optimization (webm, quality)
08:17 Custom upload button
09:40 Upload progress bar
10:57 Validation (max file size, file types)
12:00 Display video on page
12:37 Manipulate video (change width)
14:07 webm-format
14:18 ABS (Adaptive Bitrate Streaming) - HLS m3u8 streaming (next video!)

#webdevelopment #reactjs #nextjs

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 and KRS-number: 0001125554 .
.
TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)

ByteGrad

Learn how to upload videos in React and Next.js using a custom upload button with ImageKit. The guide covers creating a progress indicator, ensuring secure client-side uploads, and displaying the uploaded videos. It showcases ImageKit's features for video transformation, including resizing, watermarking, and adaptive bit rate streaming.

Video Upload In React & Next.js Is Easy Now (+ Progress Bar, Custom Button, ImageKit)

<p>this is an ad. doesn’t teach you how to actually make things like a progress bar.</p>


<p>This guy used to create useful and decent videos, but now it’s often advertising with poor content for developers…</p>
