How to upload images to Cloudinary with Multer and Express.js

hello guys and welcome to this video and today we're gonna see how to upload images to cloudinary with malter as a middleware so I will keep it very very short for you so you can get back to your code and actually upload the images I've created a basic server right here which takes this route API that users and calls our controller which is which I've called upload route you can call it whatever you want so firstly what you have to do is install the packages and that is Malta and cloudinery and I will do this again although I had these perfect it's done it's very quick then what we have to do is set up our cloudinary config file and you can pause it here and copy paste the code this is very simple and also will leave you a GitHub link for this one so you can copy the code better if you don't want to type it so what we do here is we give our Cloud name API key and our API secret key from cloud ownery after we create a free account there we can have these keys in our profile and you just copy and paste them here as strings okay it's going to look like this it's gonna be your number what I've did here is I've used the DMV file so they are not shown in in video Perfect so next one we have multi middleware so what malter does is it takes the file from the front end when you click upload image and it stores it temporarily into the disk and after that we will upload it to cloudton area so malter takes a multi-part form data meaning the form data from our front end and it stores it into the disk stores that very very basic and we can later access that one to upload it to cloudinary so first run smarter so middleware then the cloudinery upload function perfect and you can also find this code into the GitHub repo perfect so the last thing we need and it's very basic again it is the actual upload controller which I've named here route upload.js so firstly we need Express then we need a router dot then then with then we need we need express.router which I've named router here and next we need to have cloudenary which is our file right here we require that one and then we I've called this upload you can call it whatever Malta upload or malter or whatever you want so this is going to be our multi middleware which is this one right here and we have a required it we have required it like so so then we go router which is our express.router.post you have a post method and it's going to be the endpoint of Slash upload and then we call malter which is our middleware DOT upload single with a keyword image so when we go so when we go to the front end everything that has a keyword of image is going to be recognized by Malta and it's going to be uploaded as a single image and then we have a function which has a rank address and in this nameless function we call cloudinary Dot uploader which is a function from cloudinary and then we call Dot upload and the next we call the anonymous function which has an arrow and a result so if we have an error we just log out error standard.json error message and if everything is good we're gonna send the status code of 200 and the Json message off uploaded we export this at as router then when we come to the final part of our video and it is requiring that con controller that took the malta as a middleware and also runs the logic into our server and we we're gonna paste it here so this is going to run as a controller when we go to localhost 5000 apis users we are calling in this function and this is going to go to slash upload and it's going to be a post method and all the logic is going to run perfect so let's test this out let's go to postman user slash upload I've already done an email so I will do it again you know the server is not running okay do it like this okay let's upload the image okay select an image open it's loading it's uploading or should I say yep and it is all done now we can go into malter and if we refresh there should be another image here yep here is another image and that's how we upload images to cloudinary I hope this was helpful to you guys and yeah if you have any questions please leave a comment and a like and I'll consider subscribing to the channel I will be soon I will be posting a Blog application who is going to be a full stack blog application it's going to be really cool and informative so yeah stay tuned

Channel: OsmaniDev

Views: 8,231

Keywords: cloudinary, express, node, mern, react, multer

Id: 3Gj_mL9JJ6k

Length: 5min 29sec (329 seconds)

Published: Mon Mar 13 2023