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.
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.
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.
@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?
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
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
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 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?
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?)
@@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.
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!
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. 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.
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!
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!
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
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 } }
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!
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
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 used this trice now in 3 different projects. This video saved my ass a couple of times. Thanks a lot :)
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.
Very clean tutorial. Congrats!
Thanks a lot!
@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?
how can you set an image preview once you select a file before you actually upload the image
thanks you Pedro, that was really helpful 👏
Finally this is what I was looking for, u da man!
Love the video! 🙌
Thank you Cloudinary! Love your service :)
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
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
Thank you, Pedro, But how can I dynamicly get url of image?
yes just store the response in variable it returns url i suppose
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.
Just noticed that the API url you can actually copy directly from Cloudinary in the account details dropdown to save typing it :)
Yes!
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.
Thanks @pedroTech, this help me alot. Liked.
simple and effective, thank you
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!
Thanks for the guide. But I didn't get why you hardcoded the properties of an Image component?
Thank you so much. How can I retrieve or store the image's url in the database?
this was really helpful, thanks pedro
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
do u have a tutorial where we can upload multiple images in 1 post upload?
Gracias Pedro!!! Sos un crack! Me suscribo.
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
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'
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!
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! Thank you so much, excellent explanation!
Glad you enjoyed it!
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: ua-cam.com/video/RkvFfphrVmc/v-deo.html
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 ^^
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?
Hi, your video helped me, thanks!
Thanks for uploading this.
it is safe to expose the preset on the client ??
hey Pedro...can you do a video on how to implement send grid
teria como enviar mais de 1 por vez? to tentando e só caio em erros...
*Thank you sir. It was too helpful*
I got CORS issue... how to overcome that ?
You just need public_id only for cloudinary_react.
wdym? We don't need the name? I didn't know that! Thank You!
how can upload file blog to cloudinary bro
would this also work for pdf files?
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!
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.
really helpful!!! thank you very much
Thank you it was very useful
new subscriber digging your content.
Thank You! If you want me to make any videos lmk!
Edit the video title to Include something about consuming cloudinary api in react. May drive audience
What is the name of vs code theme?
Love it ! ❤️
Glad you like it!
How to upload multiple images?
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
goog job you did it 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?
I keep getting cors error
Thank you a lot sir.
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?
Cant people just get the preset from the client side
Hi, how to delete images from Cloudinary thanks
Did you get a solution?
Thanks Pedro
Pedro you ROCK!
I keep geting core error
Gracias!!!! Me salvaste la vida. You are a fucking genius
but how to map it in react
use the url that is automatically generated when you uploaded it in mongo db and cloudinary
Thank you sir
Brother 😍🔥
Obrigado mano
100% good video
Glad you liked it!
thanks a lot
👌👌
Hablas ingles de locos!
Gracisa senor
how to map all uploaded images? i all the time facing CORS problem
great
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.
Thanks Pedro, this was so helpful