How to Upload Images in ReactJS using Cloudinary Tutorial

[@studio42dev8]

Thanks a million for uploading this. I've been trying to upload an image from an admin portal then store the returned URL in my database. I spent entirely too much time over the last week trying to figure it out with the confusing Cloudinary docs. You explained in 9 minutes what I couldn't find out from the docs in a week.

[@NguyenQuangHungPH]

really

[@pidiev]

I used this trice now in 3 different projects. This video saved my ass a couple of times. Thanks a lot :)

[@whatever.username]

thanks so much for the simple explanation! My teachers wouldn't help so I was so close to tears and stressed out. Because the project due date was so soon and I was wasting an entire day trying to figure this out. I just can't thank you enough.

[@belcha]

I didn't use exactly what you showed in the video, but it helped me understand the missing piece to make my code work. Thanks!

[@pearlsswine]

THANK YOU SO MUCH! I've been clawing my eyes out trying to figure out how to use Cloudinary and this tutorial made it look like a breeze! THanks!

[@PedroTechnologies]

Hahaha glad you could work it out!

[@voytko1994]

Thank you, Pedro, But how can I dynamicly get url of image?

[@faizaanfazal1296]

yes just store the response in variable it returns url i suppose

[@newprof5583]

how can you set an image preview once you select a file before you actually upload the image

[@valencia375x]

Thank you so much fr this tutorial. I've been searching for ways to use Cloudinary with NextJS and most tutorials out there use a complicated process. Your explanation is by far the best.

[@LifeWithRilla]

Is the image link provided as a response from the api? I need a way to store those links on my database automatically via a secondary api request to my database.

[@luckyugochukwuuzukwu1810]

Hi Rilla , did you find answer to this ?

[@LifeWithRilla]

@@luckyugochukwuuzukwu1810 I took the link it provides and made a secondary api request and stored the link as the imgSrc in my database so i could recall it any time i need it.

[@LifeWithRilla]

@@luckyugochukwuuzukwu1810 So I pretty much gave the answer in my comment haha... I just posted that response link as a post request to my database anytime a new image is uploaded.

[@luckyugochukwuuzukwu1810]

@@LifeWithRilla thanks for replying. I figured , I do all my uploading on the server side so easy to handle , just curious on how it scaled for you using cloudinary(Basic Offer) as an upload service for your application and if your application is used for high rate upload operations?

[@LifeWithRilla]

@@luckyugochukwuuzukwu1810 It's not this was just a personal project so for a large scale production project i would probably use something else.

[@Dadaadad268]

Just noticed that the API url you can actually copy directly from Cloudinary in the account details dropdown to save typing it :)

[@PedroTechnologies]

Yes!

[@ruona2133]

thanks for this video pedro, it's really helpful..can you please make a video on how to save the image to the database so that we don't have to keep copying the url whenever we want to display the picture? it'll be really helpful. thanks

[@eudeamonism]

@Pedro After your submit, Cloudinary returns a response object. In that object, you have a secure_url. Can you show us how to utilize the delete_Token?

[@acelmomentcand3723]

Very clean tutorial. Congrats!

[@PedroTechnologies]

Thanks a lot!

[@peachytimeu]

I'm not sure why but when I place the image file input in , post to cloudinary fails(nothing happens in network tab) so I just use it without and it works. Thanks Pedro! You're my saviour

[@mayowafalomo1399]

I ran into this same issue too but i've figured it out

[@darthvadeth6290]

Thanks for the tutorial. Question: If I want to make an album display program, how can I query for all the images with a specific attribute? Surely there's a way to query for all images and display them, instead of just copy-pasting the IDs for each? (Perhaps even sort them by name?)

[@PedroTechnologies]

Hey, so what I do is I store the id in a db and use that when I want to display many images!

[@Bogdan79Eazy]

@@PedroTechnologies how can I get the url as a response?

[@abdel-rahmanmostafa5786]

@@Bogdan79Eazy By accessing data.secure_url. Hope you find that way

[@snehaparab2638]

@@PedroTechnologies how to fetch the id for all images from the cloudinary?

[@LifeWithRilla]

@@abdel-rahmanmostafa5786I’m going to work on this tomorrow. I’m working on a post feature for an app. I just discovered this but I’m hoping the upload api endpoint provides the Id in the 200 response so I can make a secondary call to save the image id to my posts database table.

[@dinizec]

Hey Pedro, why do we need the cloudinary extension? why not just import the image normally since we already have the url?

[@PedroTechnologies]

Hey, I actually don't remember why I installed the extension. But I don't thihnk it is necessary!

[@Cloudinary]

Love the video! 🙌

[@PedroTechnologies]

Thank you Cloudinary! Love your service :)

[@Importunity]

what extension are you using? my vscode doesnt show the tip above like that

[@PedroTechnologies]

Hey, I believe the one your talking about is called Import Cost. I have a video on all the extensions I use: kzbin.info/www/bejne/iJzZd5mmndeJo8U

[@yaroslavoz]

Thanks for the guide. But I didn't get why you hardcoded the properties of an Image component?

[@ossamaelidrissi2624]

Thanks for the video Question : I have a problem when i upload the images , it dosen't store in the folder , i'm using next.js

[@koketjosethobja1960]

Thank you so much. How can I retrieve or store the image's url in the database?

[@shermainelim197]

do u have a tutorial where we can upload multiple images in 1 post upload?

[@pipofighter]

hey man, i can't get to upload different pictures within the same state, is there any way you can help me with this ?

[@PedroTechnologies]

Hey, So u want to upload multiple images?

[@chifachelly402]

Hello pedro! am thinking about using firebase storage as an image hosting service in my react app. Am using MySql. What do u think?

[@PedroTechnologies]

I have never used it so I can't vouch for it, but I have stored images before in GCP which is also a google service and I loved it. So it should probably work!

[@chifachelly402]

@@PedroTechnologies I ll giv it a try, thank u ^^

[@shervono1180]

Hi I love ur videos. But in the line 27, I used the exact same thing but it shows an error: Argument of type 'File' is not assignable to parameter of type 'SetStateAction'. Type 'File' is not assignable to type 'string'

[@alfieqashwa]

You just need public_id only for cloudinary_react.

[@PedroTechnologies]

wdym? We don't need the name? I didn't know that! Thank You!

[@nyashamusanhu541]

Hello Pedro. I can post my docx and pdf files to cloudinary, but how can I extract them from there maybe as a URL or link which I can click and download in my React.js app. Thanks, I follow all your videos ...all the way from South Africa.

[@hammudi6790]

would this also work for pdf files?

[@gabrielfono844]

Damn pedro I was building my startup idea amd didnt want to build any backend and database. I was looking for a service that would help me store videos && images for free and use their api to retrieve all my data I will just use the sane logic for video. I guess they have a package for video in react. Thanks bro

[@PedroTechnologies]

That is awesome! I am glad you found it useful! I was also amazed with Cloudinary services as I was previously using AWS S3 and it did have a cost. Cloudinary also serves videos!

[@gabrielfono844]

@@PedroTechnologies thanks I am currently looking up the package

[@hakanaki]

it is safe to expose the preset on the client ??

[@pjguitar15]

How do you implement progress bars when uploading a file in cloudinary?

[@PedroTechnologies]

Progress bars are usually fake, so you can just add one that starts and finished when the upload is complete. I have a video on making a progress bar!

[@prt2338]

Finally this is what I was looking for, u da man!

[@danielobare8561]

hey Pedro...can you do a video on how to implement send grid

[@kirayamato7875]

Bro...how to upload file excell... i got error if i upload excell file but if i upload img,pdf no problem with that

[@shubhamsinghvi9338]

I got CORS issue... how to overcome that ?

[@47jushua]

What is the name of vs code theme?

[@mistysam6645]

thanks you Pedro, that was really helpful 👏

[@joze.rios44]

Hello,great tutorial....but sir...how can i get all images? For example if a client want a gallery or a crud? How can get all of those.?

[@joze.rios44]

I mean...a map

[@gowgowgaga]

save the URLs in an array in a database or something when you upload them and then map through the list of URLs in the client when you need them.

[@tedmosby1900]

I needed this! Is cloudinary better than S3 or GCP?

[@PedroTechnologies]

Awesome! S3 is for more scalable projects. Cloudinary can also scale, but it also allows you to be able to easily transform images and process videos. Cloudinary also has a free tier which is awesome!

[@noobdev4181]

Thanks @pedroTech, this help me alot. Liked.

[@gabrielmachado6244]

teria como enviar mais de 1 por vez? to tentando e só caio em erros...

[@ThColinPereira]

this was really helpful, thanks pedro

[@khoilam7569]

how can upload file blog to cloudinary bro

[@aniketpandey62]

Thanks for uploading this.

[@LuisTal1ercio]

simple and effective, thank you

[@benjaf9408]

How can we achieve this for multiple images upload?

[@beaandtheo2838]

Store the images array in an images state Then use .forEach() to iterate over the images array and at each image upload to cloudinary: const [images, setImages] = useState(null) //upload function function upload() { images.forEach(image => { //cloudinary upload or whatever you want to do goes in here }) } //when file input changes: setImages(event.target.files)} //onClick in submit button

[@AnibalGutierrezYoSoy]

Gracias Pedro!!! Sos un crack! Me suscribo.

[@gauravpatil6704]

How to upload multiple images?

[@amoskinyera2487]

Hi, how to delete images from Cloudinary thanks

[@shubhamprasad5929]

Did you get a solution?

[@khandoor7228]

new subscriber digging your content.

[@PedroTechnologies]

Thank You! If you want me to make any videos lmk!

[@nmteg]

Hi, your video helped me, thanks!

[@fabichasola]

Hi! Thank you so much, excellent explanation!

[@PedroTechnologies]

Glad you enjoyed it!

[@Lelouchvv]

really helpful!!! thank you very much

[@yasminamran5]

I keep getting cors error

[@shiveysingh5822]

hey can you make a video showing how you save that image url to a mongodb creating the schema and everything very good video thank you very much

[@chill-_-839]

Unlike what's shown in this video, you can view the image by a full image url. Typically when I save the image to cloudinary from the server, in the response object, you get access to the full public url. Then when saving a new object in mongodb with mongoose, have a property be a string type that holds this public URL like { PostComment: { type: String } , PostPicture: { type: String } }

[@loogie5679]

@@chill-_-839 thank you !

[@jiwachhetri4165]

@@chill-_-839 nice

[@caseyelliscwellis4577]

@@chill-_-839 this is a long shot since this is a year old comment, but could you post an example of this to github?

[@justanaverageguy4739]

*Thank you sir. It was too helpful*

[@kalahari8295]

Edit the video title to Include something about consuming cloudinary api in react. May drive audience

[@eggxecution]

but how to map it in react

[@eggxecution]

use the url that is automatically generated when you uploaded it in mongo db and cloudinary

[@anandhukraju8044]

Cant people just get the preset from the client side

[@23LS023]

Thank you it was very useful

[@jackotaru]

Pedro you ROCK!

[@MsRitika1990]

Hi I am getting 400 bad request. I have used Mysql and nodejs which is perfectly working with get method

[@PedroTechnologies]

Interesting, did you create a separate account in cloudinary?

[@minlapyae1562]

Love it ! ❤️

[@PedroTechnologies]

Glad you like it!

[@gaurav22zero8]

Brother 😍🔥

[@yasminamran5]

I keep geting core error

[@Weeb940]

goog job you did it Bro

[@chriscalver8595]

Thanks Pedro

[@jasonhuang4333]

Thank you a lot sir.

[@Rahalbro]

100% good video

[@PedroTechnologies]

Glad you liked it!

[@cebaios]

Gracias!!!! Me salvaste la vida. You are a fucking genius

[@eyout7973]

👌👌

[@kira15318]

Thank you sir

[@loveforrebellion6269]

Obrigado mano

[@Clickyv]

how to map all uploaded images? i all the time facing CORS problem

[@Klklpia]

great

[@h_nooh7390]

thanks a lot

[@juanhedderich]

Gracisa senor

[@christianherrero3778]

Hablas ingles de locos!

[@danielvrbka1135]

Nice video, but I think you can skip basics in later videos. I think most of the people who are trying to learn this already know what is event and similar basic stuff. As you usualy dont start with uploading images as developer.

[@PedroTechnologies]

Glad you liked it! I like to explain everything cause I remember hating when tutorials assumed I knew something when I was learning. But on more advanced topics I kinda jump over the basic stuff!

[@ebernard2]

@@PedroTechnologies I was really glad that you included that stuff.

[@omotehinseelvis9845]

Thanks Pedro, this was so helpful