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