Nodejs Image Upload using Multer | Nodejs and Expressjs and MongoDB

hi folks welcome back in this video  we are going to learn how to upload   images to mongodb using node.js server for that  we are going to use a package called malta here   you can see guys which we are going to use malta  is basically used for uploading files here you   can see guys before that i have completed the  basic setup for running a node.js server here   you can see guys i have connected with the mongodb  atlas make sure you have connected with mongodb   atlas or better you can even use a downloaded  version of the mongodb it doesn't matter and i am   throwing a gate request for the home page let's  check our app here you can see guys our server is   running successfully let's get back to the postman  and hit the request let's say once again send here you can see guys we are  getting the same upload file   it means we don't have any  error okay guys so let's create a file called image dot model so  basically we are going to upload images   in mongodb for that we have to have a what is  that a model file let's say in the new terminal   control card first of all we have to  install maltel let's say npm install malter it will take some time just wait for one minute   okay before while it is installing let's  create a file called image dot model dot js okay let's get back to the  terminal and check here you can   see guys we successfully installed the malta  package and let's create models let's see cons   first we have to import the mongoose okay  let's say require from mongoose package okay guys let's create a schema file before  creating models we have to specify our schemas   for that we have to say cons scheme image  schema let's say require sorry guys mangoes dot schema it does take two data types  one is string another one is image   for string we can say name and  type is going to be the string let's say string after that it must be in  the required let's say required is also true   okay guys let's create the image data type for the  let's say image it takes kinda like data buffer   buffer is basically like a binary data  our images are going to be saved in the   form of binary data and the mongodb what then  we have to see data buffer after that it will   ask for the content type what kind  of content is this let's say string okay with that done let's export this file we  are creating mango sorry model let's say module dot exports let me remove the extra r over  there let's say image modal let's say mongoose dot model here you can see it will ask you for  this string let's say image model i think more frequency and it  will ask you for the schema   which we have specified here let's  say image schema let's save this file okay guys let's import malta first  of all let's say const monitor require malta okay guys so we have  successfully imported the multar file   and we have to import our  models let's see kant's image model is imported from require dot image dot  models okay guys we successfully imported the   malta and in multi there is a option called disk  storage let me show that here you can see guys   that is storage engine basically disk storage  takes two parameters destination and finally   destination is where our file is going to be  saved and file name is what we are specifying   the file name okay let's set up our storage first  which is going to be the disk storage or that let me get back into the visual  studio code and set storage still g let's say cons storage is going to the malta dot disk storage as usual it has take destination let's say uploads nothing more fancy basically it will create a folder called  upload and store the files inside in it   after that it will ask you for the file name   it does take a request on file after  that a callback sorry not db cb okay let's say callback is null no error  and after that the file name is going to be   the original file name nothing more fancy here  here we can see kinda like this like dated now plus basically we are not going to upload so  many files for that i am going to save file dot   original name okay with that done we have to  specify this storage as the multi storage for   that we have to say cons upload while uploading  photos here you can give the name whatever the   variable name but i am giving upload basically you  are seeing you may see upload as the common name let's say malta after that we have to see storage   and we have to specify our storage as  the storage steel here you can see here   we are using smallers and here we are using  capital s because our storage as capital use   after that we are going to upload files as  one by one for that we have to say single   you can say test image do  remember this name guys because   we are going to upload images using this  name let's get back to the terminal and   check whether it has any enter no we don't have  any error we now we have to create a post out   basically we have to upload our file for that  we have to say post it does the path of upload it does take as usual a  request and then a response okay here it will here we will use this upload as a function here  you will understand that it does take request and   then a response and then error if it has any  oh let's see if it has any error if here are just console log it nothing more sorry just console log it otherwise get in the else block   undo what i see let's say we have to create new  image variable we have to say cons new image and it is going to be the instant of image model  which we have imported here you have to see new   image model it will ask you for the two ram which  is name and image name is going to be the string you can see request dot body dot name after that it will ask you for the image which is first of all we have  to say data retirees requests likewise in the body we have to  say request dot file dot file name   which file is getting uploaded after  that we have to specify the content type which is going to the image slash  png oh sorry here you can specify   png jpg or jpg it doesn't matter okay guys so  we successfully created an instance of the image   model now we have to save it the database  for that we have to say sorry new image dot save while we are talking with the mongodb we  don't know whether it may pretend success   response or failure response further we  have to say don't then if it is success   then we can say just send a success  response dot send successfully uploaded sorry guys okay if it is failure response we  have to catch it in the catch block if it has any error just console  log it nothing more fancy okay okay guys with that done let's check  our terminal whether it has any error or not   let's cut this and re-run it once again here you can see guys we don't have  any error let's get back to the   postman and set it as post and say upload we have to get in the body here we should  not get in the url encoder we have to get   in the form data because in the url encoder  you cannot see an option like desktop file in   the form data you can see the option like text  first of all we are of saying name test image okay here we should not specify kind of like this  image we should not do like this we have to use   this name test image do you remember this this name test image  let's get back to the postman and say test image and we have to change the format text into file after  that we will get the option of select files   let's say select files click on it okay let's say i put the jpeg open it and just  send here we can see we are getting the success   response actually uploaded for checking we have  to get back into the server and here we get the   option of uploaded folder here you can see guys  our file is here it does take some time to load   here you can see guys we are successfully  getting our image let's get back to the   mongodb and check let's get into upload image  this is what we specified here i think so here you can see upload image and  in the image models we must get name as test text image and   test images at poster jpeg which is in the format  of binary data let's check it image models you are   guess getting the name as text image and in the  image you are getting the object in the object   you have the data in the format of binary  format this is what we specified as buffer okay guys let's upload another one file let's see second image let's delete this and select another one file   let's select background dot jpg let's say  open let's say send we have to get the   same successfully uploaded okay guys we got  that let's get back to the db and refresh it let's take some time let's get back to the vs code in the upload folder you are getting  our ports which is uploaded previously and   just now we uploaded the background jpeg let's  get back to the browser sorry browser aren't   checking the mongodb here you can see guys name  our second image and image the object format our   data in the binary format okay guys thank you  for watching do like share and like this video   if it is possible i will create another one video  for uploading image using react.js thank you on

Channel: sahul

Views: 81,246

Keywords: imageuploadusingnodejs, multer, mongodbatlas, mongodb, expressjs

Id: GyzC-30Bqfc

Length: 14min 32sec (872 seconds)

Published: Sun Aug 22 2021