Upload Images to Cloudinary in React & Next.js

Learn how to programmatically upload images to Cloudinary from a React app. We'll walk through spinning up a new Next.js app from a demo starter, collecting an image from a form filepicker input, and uploading that image to Cloudinary with a Upload Preset that optimizes and resizes before saving it to the cloud.

🧐 What's Inside

00:00 - Intro
00:13 - Tools we'll use including Cloudinary and Next.js
01:10 - Creating a new Next.js app from a Starter
02:30 - Reviewing demo image uploader app
04:05 - Finding an image from a form file picker input in React
07:53 - Adding an image to FormData to upload in a request
09:07 - Setting up a new POST fetch request with FormData to Cloudinary
11:28 - Creating an Upload Preset for unsigned Cloudinary uploads
12:52 - Appending Upload Preset to FormData to upload image to Cloudinary
14:15 - Creating an Incoming Transformation on an Upload Preset to resize and optimize images on upload
17:45 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-p...

💾 Code
https://github.com/colbyfayock/my-ima...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
  / colbyfayock  

📸 Catch the next stream live on Twitch @colbyfayock
  / colbyfayock  

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Cloudinary
https://cloudinary.com/

Upload API reference
https://cloudinary.com/documentation/...

Upload Presets
https://cloudinary.com/documentation/...

Transformations on upload
https://cloudinary.com/documentation/...

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/hartzmann/clear-sky
License code: QXVYTSAPT19IXM5Y

#colbyfayock #cloudinary #react #nextjs #upload #media #images