Upload Images to Cloudinary in React & Next.js

🧐 What's Inside

00:00 - Intro
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

💾 Code

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Cloudinary

Upload API reference

Upload Presets

Transformations on upload

🎼 Music
Music from Uppbeat (free for Creators!):
License code: QXVYTSAPT19IXM5Y

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

[mustaneerhaider]

Man the way you explain is great, quick and to the point explanation not some boring tutorial.

[jamesgrubb]

Thanks for the tutorial. I've watched quite a few Cloudinary tuts but like the way you expand on subjects like using the console to create variables. Nice!

[mandre]

Was looking for hours on ways to implement user uploaded imgs to a project and you sir are a lifesaver ♥

[arisudana]

My brother you saved my final project (and quite literally my life) with this tutorial. Thank you so much

[dugsiiye]

Man I appreciate your tips and tricks on every video i have watched from your channel. 🔥

[moretimeproductions]

Thank you so much, this was really VERY helpful! <3

[LifeWithRilla]

You earned yourself a follow my man killer tutorial. I’m excited to use this tomorrow.

[okadz]

ty bruv ur the best, iwas stuck so much in my ecommerce project, i resolve it, thnx again🥰

[daviddavenport]

Thank you very much for this tutorial. It was very helpful!

[kunalkhairnar]

Thanks for this video. Huge help. Thanks 😍

[GMERT]

Thanks for always given use knowledge. You are the best teacher I have on youtube. Please I want you to do a video on how to add thank you page to emailjs react code . I have been battling with that for weeks.

[florianweise]

Fuck nice content. Just searched for cloudinary nextjs upload, found ya, cool voice and nicely done. 😊👊🤟

[devstefancho]

20 minutes feels like 3 minutes, greate tutorial

[adamcardenas]

Hey Colby, unsigned uploads are great for demos, though that means anyone with your upload URL can POST images to your site, right?
Any way to easily secure these uploads?

[zaritzki]

Thank you Colby! Do you have for multiple uploading with preview? and maybe we can seleect which one is the cover photo? Thank you in advanced

[marekmarszaek]

Hi guys im struggling with how i can save this image not on Cluidanry but in my filesystem or my server. I didnt find any good solution to do that without install dozens of npm's. Thanks a lot for any answer

[fran_sar]

Hey, awesome tutorial!!!!
Could you tell me what is that @description thing in middle of /* */ comments?
I looked it up as JavaScript, Nextjs, Reactjs and Storybook part but found nothing

[iShubhamPanchal]

Amazing tutorial ❤️, but 1 question, can you tell me how to delete images from cloudinary using axios or fetch.

[edwardyeow]

Thank you for the tutorial. I have a question, how can I upload multiple images to cloudinary? I added multiple attribute to the <input>, but no matter how many images I selected to upload, cloudinary will only receive one image.

[donmikkodanm.olmillo]

Hi! I would love to ask how to upload images / videos on a specific folder? I cannot seem to find the base url with a folder parameter