Cloudinary Files/Images CRUD Operations Using Nodejs, Multer and MongoDB

hi everyone in this video we will build a node.js application to perform crud operations on files we will upload files to cloudnay and then we will see how to get files update and delete them so for that we will be using node.js express multi cloudnary and we will save our data into mongodb so let's start this first of all let me create a folder and then open that folder into visual studio code let's create package.dsn file now we will install packages express mongoose i will also install a dev dependency nodemon now let's create our entry file which will be index.js and modify our package.json to use nodemon first of all we will require express after that we will require mongoose and dot env now we will listen to server app.listen on port 5000 now i will create a dot env file to hold our database config i'll be using my local mongodb instance you can use it locally if you have or you can use mongodb atlas i will name the database as let's say imagesquad now in index.js i will connect database mongoose.connect process dot env dot url and here we will pass some options to avoid deprecated warning given by mongoose now let's edit.then dot catch in case of successful or error response now we will add a middleware to parse body request dot body app.hues express.json let's run the server to see if everything is working and that's because there is a typo okay it's connected now let's create a user model it will have three fields name avatar and cloudnary id the cloudnary id will be used when we will make update or delete request so let's create a folder name call model and then use it name type string this will be avatar and then cloud90 id let's export this model now login to your cloudnay account if you already have one if you don't have one then sign up for it because we will be needing this cloud name api key and api secret so i will add these configurations in our dot envy file cloud90 cloud name api key and api secret so this is my cloud name use yours and here i will paste api secret but i will paste it off the record as it is secret key now i'll create a folder utils to hold multi and cloudinary configuration after that we will say cloudnery.config and it will take object and here we will provide uh cloudnary cloud name api key and api secret cloud name api key api secret and we will get these values from our dot env file now let's export cloud90 from this file um actually we will use dot v2 now i will create file for multi and i will paste in here from my snippet so here we require multi we required node.js cool module which is path so we don't have to install it um and then we set module dot export smarter and it will take object first storage multi dot disk storage we don't pass anything in it and then file filter to filters file which we want to allow in our case we are only around.jpg.jpg and png so here we use path dot ext name to extract the extension and we pass file dot original name and then we said if extension is not equal to these file these formats which we have mentioned here then we will generate error this cb is callback and it will take two arguments the first is error and the second is except file which is boolean in case of error we said we don't want to accept files so it's false and we have generated errors and then returned so that it doesn't go forward and if file formats are supported then we accepted file and pass error as null now let's create a route for user we will bring clownery and malta from utils folder first of all let's make a post request so we'll say router dot post slash and i will be using async award so in order to get access to file here in sec after route we will say upload dot single image and this is the name you will provide in from your front end we will not be using front end in this project we will be making request with postman so if we are using front end it will be like input type file and name equals to image so this should match this one now let's try to upload file to cloudnay and see what is the response we are getting back it will say await cloudnary dot uploader dot upload and here we will provide path to the file request dot file dot path let's see what's response we are getting back rest.json result now here in postman no actually first of all we will define our user route in index.js file i have not used it will be slash user not slash route slash user so our request will be on localhost colon 5000 slash user and then for this route it will be just slash it will be a post request here in body we will select form data and now this is the name i was talking about image so first of all we will select file from here so let's select file let's make a request so this is the response we got back from cloudnery however we will be using two properties only public id which will be crownery id which we have already specified in our model and another one is secure url yes secure url so let's see in our cloud native here is the file we have just uploaded okay so here we are creating an instance of user we are providing name avatar now this avatar is not coming from body its value is coming from result we have already seen result have object have two properties secure url and public id so we are allocating secure url to avatar and cloud public id to cloudnay id so let's save it and see oh and here we save user and we are getting the json back let me provide name here i guess there is an error let's see oh i have not imported user model here let's try again so that's it it's our mongodb id our name which we have provided in body the avatar this is the secure url from cloudnary and cloudnary id let's check in our database so that's it now let's make a get request so we are making request on the same route slash and here we are finding the user and then getting json response back and it will be an array because we have not specified any user id let's try it actually add another one okay so we got back our user now delete request i'm pasting the code just to save time and i will explaining so here we are making request to slash user and then user id so first of all we are finding the user by id and we have used mongo's find by id method and we have provided request.params.id because we are providing id into params and now we want to delete the image from cloudnary for that we will use cloudnary dot uploader and then dot destroy now destroyer takes public id the cloudnay public id and we have already stored that as cloudnary id into our database so we will get from user.cloudnary id so here we are removing image from cloudnary we are removing user from database and then we are getting with the user which is deleted let's make a request to this route let me grab the id let's make a request so this is the response we got back let's verify it if it's deleted okay so user has been deleted now let's check into our cloud nati account [Music] requests let's just leave that and try again let's make a request here just change the file let's verify in database okay now in cloudy here is the file now let's try to delete it grab id from here this is the deleted user let's check database but it's literal and now in cloud navi already okay it's deleted now finally we will move on to update so this is our request to slash user slash id here as second argument we are passing um this will be upload that single image async request response okay so first of all we are finding the user by id so now we want to update the image means replace the existing image with the new one so first of all will make requests to delete the existing image and we will do that with cloud navy dot uploader and we will get the cloud name user data in user database once it's done we will upload new file primary dot uploader dot upload and we will provide our file path request.file.path so here i have created a data object and passed name property which will be either requested body dot name if you have provided name and body otherwise it will use the name given database and for avatar if we are updating the image then it will use the new image which we will get from result dot secure url or if you are not updating the url then we will use the existing url from our database user dot avatar and same with the cloudnary id and after that we have used here user.find by id and update user by id and as second argument we have provided the data which is to be updated and then new equals to true to get the updated result immediately and here we have we are getting with that user so i hope it makes sense first we find user by id then we make a delete request to cloudnay to destroy the current image and then we upload the new image after that we have updated our database let's try it out so currently i guess we have no we have not anything let's make a request okay let's check our crowd neri account okay so this is the image let's update the image make it a put request and form data file image let's take some other file let's pick this one probably there is an error let's see what's that cannot read property cloudinary id of null oh actually i've provided the old id which is already deleted so here we get the response back let's see our extraordinary so it's updated here let's see the database from q and that's it so it's working so that's it guys that's how we can perform trade operations on cloud nearly i hope you like it thank you bye

Channel: Farhan Farooq

Views: 12,156

Keywords: nodejs, multer, mongodb, cloudinary, crud

Id: LWB1s6P0wgE

Length: 26min 55sec (1615 seconds)

Published: Sat Oct 03 2020