How to Upload Images in ReactJS using Cloudinary Tutorial
HTML-код
- Опубликовано: 10 фев 2025
- In this video I teach you guys how to Upload Images in ReactJS using Cloudinary. The cloudinary API allows easy upload of images, videos, and files to the cloud. We also use Cloudinary-React, which allows us to grap the images very easily.
-
Please leave a comment on what topic you guys want me to cover next!
Checkout my discord for any questions: / discord
-
SUBSCRIBE!
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
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.
really
I used this trice now in 3 different projects. This video saved my ass a couple of times. Thanks a lot :)
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.
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!
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!
Hahaha glad you could work it out!
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.
Finally this is what I was looking for, u da man!
Love the video! 🙌
Thank you Cloudinary! Love your service :)
Very clean tutorial. Congrats!
Thanks a lot!
thanks you Pedro, that was really helpful 👏
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
Thanks for uploading this.
Thanks @pedroTech, this help me alot. Liked.
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
I ran into this same issue too but i've figured it out
simple and effective, thank you
Gracias Pedro!!! Sos un crack! Me suscribo.
this was really helpful, thanks pedro
Hi, your video helped me, thanks!
really helpful!!! thank you very much
*Thank you sir. It was too helpful*
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
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!
@@PedroTechnologies thanks
I am currently looking up the package
Hi! Thank you so much, excellent explanation!
Glad you enjoyed it!
Thank you it was very useful
goog job you did it Bro
Thanks Pedro
Just noticed that the API url you can actually copy directly from Cloudinary in the account details dropdown to save typing it :)
Yes!
Thank you a lot sir.
new subscriber digging your content.
Thank You! If you want me to make any videos lmk!
@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?
Love it ! ❤️
Glad you like it!
Pedro you ROCK!
hey Pedro...can you do a video on how to implement send grid
Thank you, Pedro, But how can I dynamicly get url of image?
yes just store the response in variable it returns url i suppose
how can you set an image preview once you select a file before you actually upload the image
Brother 😍🔥
Thank you so much. How can I retrieve or store the image's url in the database?
Edit the video title to Include something about consuming cloudinary api in react. May drive audience
do u have a tutorial where we can upload multiple images in 1 post upload?
Thanks for the guide. But I didn't get why you hardcoded the properties of an Image component?
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.
Hi Rilla , did you find answer to this ?
@@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.
@@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.
@@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?
@@luckyugochukwuuzukwu1810 It's not this was just a personal project so for a large scale production project i would probably use something else.
Thank you sir
100% good video
Glad you liked it!
Gracias!!!! Me salvaste la vida. You are a fucking genius
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?)
Hey, so what I do is I store the id in a db and use that when I want to display many images!
@@PedroTechnologies how can I get the url as a response?
@@Bogdan79Eazy By accessing data.secure_url. Hope you find that way
@@PedroTechnologies how to fetch the id for all images from the cloudinary?
@@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.
I needed this! Is cloudinary better than S3 or GCP?
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!
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
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.
Bro...how to upload file excell... i got error if i upload excell file but if i upload img,pdf no problem with that
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'
Hello pedro! am thinking about using firebase storage as an image hosting service in my react app. Am using MySql.
What do u think?
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!
@@PedroTechnologies I ll giv it a try, thank u ^^
You just need public_id only for cloudinary_react.
wdym? We don't need the name? I didn't know that! Thank You!
👌👌
great
Obrigado mano
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
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 }
}
@@chill-_-839 thank you !
@@chill-_-839 nice
@@chill-_-839 this is a long shot since this is a year old comment, but could you post an example of this to github?
thanks a lot
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.?
I mean...a map
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.
Hey Pedro, why do we need the cloudinary extension? why not just import the image normally since we already have the url?
Hey, I actually don't remember why I installed the extension. But I don't thihnk it is necessary!
How do you implement progress bars when uploading a file in cloudinary?
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!
what extension are you using? my vscode doesnt show the tip above like that
Hey, I believe the one your talking about is called Import Cost. I have a video on all the extensions I use: ruclips.net/video/RkvFfphrVmc/видео.html
teria como enviar mais de 1 por vez? to tentando e só caio em erros...
hey man, i can't get to upload different pictures within the same state, is there any way you can help me with this ?
Hey, So u want to upload multiple images?
I got CORS issue... how to overcome that ?
how can upload file blog to cloudinary bro
Hi I am getting 400 bad request. I have used Mysql and nodejs which is perfectly working with get method
Interesting, did you create a separate account in cloudinary?
would this also work for pdf files?
it is safe to expose the preset on the client ??
What is the name of vs code theme?
Gracisa senor
How can we achieve this for multiple images upload?
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
How to upload multiple images?
Cant people just get the preset from the client side
Hi, how to delete images from Cloudinary thanks
Did you get a solution?
Hablas ingles de locos!
I keep getting cors error
but how to map it in react
use the url that is automatically generated when you uploaded it in mongo db and cloudinary
I keep geting core error
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.
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!
@@PedroTechnologies I was really glad that you included that stuff.
how to map all uploaded images? i all the time facing CORS problem
Thanks Pedro, this was so helpful