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-programmatically-upload-images-to-cloudinary-in-react-next-js/ 💾 Code https://github.com/colbyfayock/my-image-uploader/ 🔔 Subscribe for more tech and developer videos null 🐦 Get updates straight to your Twitter @colbyfayock https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch @colbyfayock https://twitch.tv/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: hello@colbyfayock.com 👨‍🚀 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/image_upload_api_reference Upload Presets https://cloudinary.com/documentation/upload_presets Transformations on upload https://cloudinary.com/documentation/transformations_on_upload 🎼 Music Music from Uppbeat (free for Creators!): https://uppbeat.io/t/hartzmann/clear-sky License code: QXVYTSAPT19IXM5Y #colbyfayock #cloudinary #react #nextjs #upload #media #images