Uploading an Image using Nodejs and Retrive Image in React | Multer | Mongo db

hi folks welcome back to my channel in this video  we are going to learn how to upload a image in   mongodb using node.js and how to retrieve the same  image data in our react application okay guys i   already have created a video like this but in that  particular video we didn't care about react we   didn't care about how to redrive that same image  data but in this video we are going to complete   that for that i have initialized my backend server  and launched a react application which is pretty   simple here you can see i have deleted all the  extra unnecessary files in the source folder   and all extra unnecessary stuff just a complete  a new blank react application which is saying   image uploading react that's it in the backend  server i have completed my basic setup like how   to set a server here you can see first of all we  imported express on and we created a instantiate   of that express application and we make use of  body parser and mongoose and corrs because we   are going to connect our backend application with  our fronted application for that we have to enable   cost right so that's why i imported the cost and a  port number okay here you can see i have connected   my backend application with mongodb atlas here you  can see this is the connection which i have made   and a simple get request and our backend server is  listening on the port number 5000 this is what we   have done till now and as i said before we have  done our basic setup for the react application   okay guys now we are going to focus on a  particular package which is malta here you can see   guys this is the package which is going to help us  to upload image here you can see in the first line   itself they say multer is a node.js middleware for  handling multi-part form data which is basically   used for uploading files that's it okay guys the  idea behind how to upload images whenever a user   wants to upload an image the particular image  is going to be saved in our file system like   here in the particular backend server like uh  we will create a folder and in the particular   folder our images are going to be saved after  saving in that particular folder that particular   image is going to be saved in the mongodb  atlas which is in the format of binary data   okay i think i am speaking a lot you  will get to understand when we code it   just keep on listening you will get to  know what we are doing first of all lets   install motor for installing monitor  you have to say npm install motor okay don't worry guys if it sounds pretty confusing  just listen on the flow you will understand   it okay we successfully installed our malta  package now let's import it for that let me   say cons molder okay before that let's check  whether our application has any error or not   i already have installed in odimond which is  a development dependency just hit on scene   which is a development dependency i'm going to  run my application by using node mod nodemon   index.js right index.js okay   it will initiate our application okay let's  import the motor for that i have to say require   okay monitor let me name it or let me spell  it correctly otherwise i will face the error   okay it says server running successfully we  connected successfully it means here you can see   if we are not connected with our database it says  like it has an error if we connected with our   database it is connected successfully it means we  don't have any issue with connecting our database   like i have my you are resting properly  with my correct username on the password   okay for that it doesn't give me any error let's  focus on multur now let's configure our storage   here you can see where it is here you can see  we have to configure our storage like this   okay for that let me get down  under the mongoose connection   okay before that we have to create what models  otherwise we can't able to store our data   in the database right okay let's first concentrate  on models.js here you can see i have a file called   models.js i didn't write any schema it now  let's write schema okay let me name cons okay let's say image schema  let's say new mongoose dot schema   okay this is going to take two thing one is  name which is in the format of string after that we need our image data okay which is data in the format of buffer okay buffer  is similarly like a array data type guys don't   confuse what a buffer is buffer is similarly kind  of like a array data type that's it after that we   have to specify the content type like this content  type like image slash png because because our   buffer data type is in the format of what image  so that's why we have to specify the content type   okay this is our schema guys very pretty simple  straightforward name which is in the format of   string and the image which is in the data type  of buffer that's it now we have to export this   schema before that what we have to do we  have to create it as models export dot module is equal to image model export it as image  model now we have to convert the schema as   models mongoose dot model okay it will  ask us the name let me name as image   okay let's say the particular schema which is  image schema okay we are successfully done with   creating a schema and creating a model okay  now let's get back to the index.js file here   let me do a small change which i left it  the default let's say image data here okay with this done now let's configure  our storage engine right which we saw   in the documentation right for that you have  to say cons storage is equal to smaller dot   disk storage we are going to save our image data  we are going to save the image data initially   in our computer after that saving that image  data in our computer we are going to take that   particular image data to the mongodb atlas this is  the concept guys you will get to underst when we   code it completely okay till that just follow  me malta dot disk storage now here we have to   specify the end destination where the image is  getting upload okay we have to say the destination   destination it does take a call but it is take  a function it will have a request file and   after that it has a callback okay let's handle the  callback first call back set the error as null and   we have to set the end destination part which  is upload okay don't feel like bit confusing   we have to create a folder called upload now  uploads now for that let's say folder uploads   okay we successfully created a folder called  uploads here you can see yes the end destination   is uploaded here image is getting posted that  image is going to be saved in the particular   folder called uploads because here in the storage  engine we have specified the destination which is   the end destination to be uploads folder okay  we successfully declared the destination after   that we have to specify what the file name has  to be what the name of the particular image to   be for that i have to say finally likewise it  has take it takes the request and then a file   and then a callback as usual what we done for the  destination okay let's handle the callback first   and we should be set the error as null  okay now we have to specify the file name   okay let's see here we have our request  in the request dar we have our file   let's say let me go to this uncheck what they have  specified here okay not request we have to sit in   the file here you can see we already have our file  so that's why in the file we have many fields like   file name original name field name in this case  i am going to use the original name because i am   not going to upload as many images i am going  to upload only two or three images because   this is a demo just i want to show you how to do  this stuff okay file dot okay here you can see   we have field name file name mimi type original  name this is what we are going to use okay this   is done guys the idea is pretty simple guys first  of all we have to set the storage engine here you   can see the storage engine is disk storage we have  to set the destination where the image is getting   uploaded are getting saved after that what is the  name of image what the image name is to be the in   our case i'm specifying the original name itself  if you want to change it like you can do this   like you can add some number to it or you can  do whatever you want but i am going to save as   the name original name okay that's it now we have  to configure it how to do that const upload okay uploads don't confuse it guys  just follow me malta storage is storage okay here you can see guys we just  configured the storage till now we didn't   say this is the storage you have to use in the  30 second line we are asking our malta to use   this particular storage engine okay here  we configured this here we saying the motor   to use this particular storage i hope you don't  get confused okay this is pretty simple code guys   just see just seven lines of code first of all  we have to say the storage engine after that we   have to configure the storage engine that's it  okay we are done with this what we have done we   created our schema and we done with our storage  engine now let's get into the most exciting part   which is posting the image data it means we have  to handle the post request right okay whenever   the image is getting post it is going to be done  with the post request okay let's do app.post okay after that we have to set the path which is home  route now we have to configure our middle bar   which is multi middleware here you can see we  should not configure like the storage engine we   have to configure where the upload is happening  here this upload we have to configure here let   me do some extra spaces here upload dot method  which is single because we are going to upload   the image as single single image not as many image  not as like a 10 images together we are going to   upload images like one by one okay here we have to  specify your field name okay guys just concentrate   on the field name properly because this is very  very very important step here i am giving the   field name as test image okay after that here you  can see we just configured the path after that we   configure our middle valve which is multi now we  have to handle the request after that response   okay before that make sure whether you  imported your models which is image model   okay i already imported my model now  i have to save my data right let's say   save image we have to save the email  until now what we have done is we   have just configured the middleware now we  have to handle the saving the data in what   mongodb now we have to take care where the image  is going to be saved how to save in the mongodb   okay now let's say save image okay as usual  it takes image model i think i have to see   new here new image model it does take what are the  data we have specified in the models we have name   and image data only two data straight forward  data like a image okay image is going to be   coming from the fronted which is in the body  okay guys don't worry we are not going to code   any front end we are going to use a what is  that postman which is a api tool to get the   front-end data okay request.body.name after  that we have to configure our image okay   in the image what we have data which  should be in the format of buffer okay   but where the image is getting saved the image  is going to be saved in the uploads right   okay guys before that let me import file system  for that i have to say fs is equal to require   first okay we successfully imported the  file system now what we are how to do is   for the name data we don't have to care that much  we are going to get the data from the printer in   the body part and we are going to save that data  in the mongodb but for the image data we have to   take much more care okay in the models we  have specified data on content type okay let's say uh sorry guys here i should not do  like this i have to say string i just forgot okay   i think this is the correct format let me check  it once again in the geeks4geeks website they have   you they have given correctly here you can  see the data is buffer and the content type   string okay don't make me don't mistake me guys  just i forgot that stuff okay now let's get back   into the app.post request first of all we have  to handle the data type okay what the starting   of the video i said no first of all we are going  to save the data in the uploads folder it means   our image is initially going to be saved in the  upload folder we are going to take that image   and we are going to save in the mongodb for that  i have to say a first dot read file sync and   we have to set the path where the data is  okay where our directory is uploads okay okay this is done after that because why i am  saying upload uploads is this is the folder which   we specified in the destination okay because the  images are going to be saved in the uploads folder   once i do the demo you will get to understand  what is happening okay after saying the uploads   we have to save the file name it is pretty  simple request dot file name that's it okay   this is how it should be let me check once  again okay let's get back somehow down okay   file name which we did in the previously okay  we are done with this but i have to say request   dot file dot file name okay now we are done  with the data now we have to say content type   content type which is in the format of string  write here i am going to save it as image slash p   and g because because our data are in the  format of image not in the format of give or mp4   those are going to be saved in the format of  p and g so that's why we have to see content   type i hope it makes sense now okay now we have  to save this for that we have to say save image   dot save okay not is that it is a okay   here you can see guys we are dealing with  mongodb which is a third party whenever we   are dealing with a third party using node.js we  have to handle it we don't know whether it will   give a success response or failure response for  that we have to say if it is success response then just say console.log image is saved okay if it is failure response  we have to handle it in the catch block i hope   you guys are already familiar familiar with  this okay let me add a bracket over there   okay now let's handle this catch  block okay if it is failure response   just say the error what is the error is  and just say error as error has a car   okay with this done i hope we are done with  this now let's open our postman api tool and   check whether we have any error or not i hope we  have done correctly we should not get any error   okay guys now check whether it has any error or  not after that let's get into postman to check   our api okay let's open our terminal check whether  it has any error or not here you can see guys our   server is running successfully it means still  now we don't have any error now let's get into   postman and check whether our app is running  or working perfectly fine or not okay for that   let me get into postman this is our mongodb  atlas guys let's get into it sometime later   which is two minutes later okay now let's first  check our get request here you can see our port   number is 5000 okay now let's say send over  here and we should not get any error i hope so   here you can see this is working perfectly  fine we are getting this is working fine   now let's say post request because this is the  this is the gate method which i specified here   this is working fine this is what we have  got there okay now let's do the post request   just say post and get into the body here you  should not get into the url encoder you have to   get into the form data now you have to say the  two datas one is name let's stick this out and   we need another one field okay let me name  whatever i wish are testing okay image one   okay image one now here you have to very  very very very very very very careful guys   you should not do like this where it is you should  not give this image like img you should give the   this name which we have specified in the middle  by writer what we have specified the field name we   have specified the field name as test image this  is the name which we have to give here otherwise   it never ever gonna work so please please  please be careful while doing this test image   this is the field name which i have given here  so that's why i am saying test image over there   okay so please be careful guys you have to  say the field name which you have specified   in the middle bar okay let's get back into the  postman and see click on the select files now   okay i am getting into pictures that i have  pictures i am clicking on artwork.png okay   just say open it really doesn't matter what the  whatever the image you give just i wanna show you   how to do this okay now say send i hope it should  not give any error it has to work perfectly fine   let's say send okay as expected gave a error to me  they actually found out where the actual error was   it is a simple error guys it is a  careless error guys which i made here   i should not say come on i have to say plus  here so that's why i actually got that error and   so that's where i actually got that error that's  it guys it's not a it's not it's a simple error   guys it's not a big deal to handle it so make  sure you should not say comma over there you   have to say plus over that otherwise it is always  going to give error if you say comma if you say   plus it doesn't give any error okay that's  it after that i have made another one small   mistake not in the index.js file in the model  models.js here i should not say modules dot expo   export.modules how to say module.export okay  module dot export otherwise it also doesn't go   nowhere guys so that's why you have to say  module dot export here you have to say what   um uploads plus request dot file dot file name  that's it guys i hope this time we should not   get any error this time it will work perfectly  fine okay here you can see guys i added a extra   more line in the 52 which is a success response if  we saved successfully our image it just say images   here okay guys with this said let's test our  image okay before that i have to delete this okay   let me see move to trash here you can see guys  our upload folder is empty just uh see here our   uploads folder is empty whenever i say here  you can see name is image one and test image   one okay before that i have to delete one thing  which is this okay let me delete this okay   now let's say here you can see name is image  one text image okay don't forget to say test   image otherwise it never gonna work let me  say send okay here you can see guys we get our   success response which is image saved okay let's  get back to the folder let's get back to the   backend server and check the  uploads here you can see guys   in the uploads we have our screenshot which is  just now we saved okay now let's get back to the   mongodb uncheck and say refresh we will have a  single data which is just now we posted right   okay it says loading documents here  you can see guys we have our image one   now let me add another one image image too  okay let me undo this and say select files   okay in the pictures let me say artwork.png let's  say open and say send okay here you can see guys   this time also we get images saved now let's get  back to the mongodb at last and check reference sorry and click refresh not check request here  you can see we have image two and we have our   image data which is in the format of binary  okay okay guys here we have in the format of   binary but actually this data is getting saved in  the format of buffer okay that i will get to it   later when we are handling or when we are dealing  with front-end okay let's get back to the server   and check oh okay sorry oh [ __ ] i unfortunately  closed that let me open that once again   here you can see guys in the folders we have our  artwork.png which is we uploaded just now till   this point we successfully completed our backend  server now let's get into front-end application   which is our react application okay guys now let's  focus on react application okay let's jump into   react up here you can see guys uh we only have our  a single heading tag nothing more than that and i   deleted all the extra unnecessary files in the  source folder and even in the app.css we don't   have any styling and let's get into app.js okay  guys now what we have to do is first of all we   have to connect our fronted application with what  our backend server for connecting application we   have either we can use switch basically we  have to work on apis right now whether we   can use a page or you we can use a separate  particular library or package which is axios   here i'm going to use axios package for that  let me install axios okay let's say new bash okay let's install axios first for  installing axis you have to say npm i   axios it will install axios axios is basically  a promise based http client that's it guys using   axios we are going to connect our api using  axios we are going to connect our front-end   application with our back-end server that's it  okay let's import axios okay let's see import axios from axios okay we successfully imported axios after  that we have to import two important hooks   one is use effect another one is used it okay  let's first import use effect and use f use state   okay let me say import use state from  react okay after that let's say use effect let's say use effect okay we successfully  imported both the two hooks now let's work   on use effect first no first of all we have to  define our data by using use state let me say cons data set data not date data okay let's say you state  okay guys initially our data is going to be   empty after getting the data from back and we have  to update our data with our current data which   we have got from the back and right for that we  have to use the special hook called use effect to   i hope you guys are already familiar with using  this particular hook called use state hook   now initially we have to set our data as what  empty string let me say empty sorry not empty   string let me say empty array okay we are done  with our use state hook now let's use use effect   hook i know you guys are already familiar with use  effect use effect is basically runs every time our   app re-render or it runs at the initial rendering  of our application so that's why at the initial   rendering we have to get all the data which is  in the back end to the front-end application   right for that i am going to use use effect okay  let's say use effect it does take a call back now let's say we have to use our axios http promise based client  which is going to be simply a get request guys   and our end url is http localhost local host slash 5000 i think so no no no   it has to go like this like http localhost slash  and after that we have to say 5000 that's it   okay oh sorry guys i forgot to do another  one thing which is in our back-end server okay let me get into the back-end server  till this point we successfully completed   how to upload this post we have just  handled the post request still now we   didn't handle the get request now let me  handle the get request which is going to   be super simple guys you don't have to  worry a lot about it okay let's say get okay let's say enter here or better i can  delete this let me write once again newly   let's come down under the post one let's  create a get one app.get okay it's going   to be home route after that it also take  request another one responds okay let's say we have to get all the data  right accounts all data is equal to image model dot fine that's it it  returns every data which is in the database   that's it guys we don't have to worry a lot about   with this which is going to be a sync operation  so that's why i'm going to specify async await okay we are done with this now we have to  send this data right for that we i have to say   rest.json are you and you can say  this dot send it really doesn't matter   okay we successfully handled our get request  now let's check whether it has any error or not   it says no error okay guys now let's get  back to the postman and check whether it   has any error or not i hope it won't  show any error for that let's say   get back into the postman and change the  post request to get request and say send okay it is taking time longer than the usual i  don't know why it is taking this much amount of   time okay we got the data here you can see guys  we have a big array here you can see a big array here you can see uh let's first check whether  the name or it's a huge one guys here you can   see this is the buffer array which i see here  you can see it is a big one here you can see   here we have the name image too we have our two  datas so we don't have to worry about that now   okay guys now let's focus on our front and  react application just come to this where it   is here you can see now okay now axios returns  two thing one is a success response which is i   which is the actual data or other one is  failure response which is a error basically   now we have to handle the success response  which is it will basically return all the   data if it is success response we will catch  it in the then block okay rest set the data oh i left a bracket there okay we  have to set the data as rest.data   at this line you have to concentrate more here  here you can see whenever the axios returns a   success response it means we have a data inside  the success response after getting the data   we are changing this empty array empty data into  the particular data okay now we have to handle the   error data if it has any error just console log  there are nothing more fancy console.log error   just say it has an error okay now we have  to focus on the rendering page which is the   basically the return one just save this and  just close this terminal just close it okay   now we will have many data not a single data  for that i am going to use a method called map   inside we want to write javascript in the html  in the written html we have to open curly braces   and we have to say data dot map okay we have  many data right for that i am going to use map   method for every single data let me name as single  data single data okay i have to open brackets the   because map itself a higher order function it  does take a callback function okay now it will   have many datas right in the many datas we will  have our image now what we have to do important   step guys just focus on this we have to convert  our binary data here you can see we are all we   have a huge array which is basically the buffer  data we have to convert this buffer data into   base 64 string for that we i am  going to say cons base 64 string let me now we have to convert this buffer  into basic c4 there is a thing called btoa   after that we have to say string dot from  charcoal after that you have to say you new   unit 8 array here unit eight array we have to  specify this what is it let me go to the top   we have to specify this data this array data  here you can see we have image inside that   we have data inside that we have our buffer data  for that we i have to say like this right are the   front-end application each data in the each sorry  single data in every single data what we have   we have image okay first of all let me specify  image inside every single image we have a data   inside every single data we have the buffer  data okay that's it we are successfully   converting that buffer data into base64 string  now we have to display this base64 string into   the image for that we have to use image  tag okay img image tag not like this guy okay image we have to say in the source not  like this open this special quotation i think so why it doesn't work that much perfectly fine okay  open this special quotation now we have to specify   our base64 string but not alone the base64 string  like we have to say like this data and image slash   png comma base 64. i hope like this it has to go  let me go to the stack overflow page and check   okay just click on the stack overflow what happens  it hangs out i don't know why it is doing like   this okay here you can see like this we have to  do just copy this this is what i have done i think   i am doing correctly now i have to change this  comma to the quotation okay now let's say a comma   over here okay that's it we have to open  this dollar symbol after like this okay   dollar symbol and like this now we have to specify  this base 64 string that's it guys base64 string okay we are done with this now let's say   rerun our application well let's check whether  it has any error or not for that you have to   open your terminal which is our is that our our  front-end application is running successfully   it has no error it is working perfectly fine  now let's okay here i forgot to say return to you or okay now it will show the image  here you can see guys we successfully get our   image but it is damn big let me do small size  okay let me say with this 300 pix 300 percentage   or not 300 percentage with this 300 i think so  here you can see here here you can see guys we   successfully get our image that's it guys we  successfully retrieve our image which is in the   database which is in the format of buffer array we  successfully converted the buffer array into the   base64 string and the base64 string is converted  into the image and be successfully displaying the   image that's it guys i hope i completed this video  that's it let me walk through the process quickly   first of all let's get back to the back end server  here you can see guys so first of all we connected   all we done all those basic steps after that  we declared a storage engine after that we   initiated a post request but in the post request  we configured a middle bar which is multi storage   here you can see here i named it as upload you can  name whatever you wish but you find upload as the   common name so that's why i say upload after  that here you have to remember this test image   this is the field name you should give what  you should give the test image this field   name otherwise you can't able to upload the image  okay first of all what it happens whenever we say   post request it takes this particular image to  the to this destination folder which is in our   case uploads and that image is getting saved in  the destination folder after that we are taking   that image from the destination folder and storing  it in the mongodb atlas okay after completing that   okay that's it uh we are successfully saving the  data in the post request we are getting all the   information which we are getting all the data  which is in the mongodb atlas and just returning   to the front end here let's get back to the  front-end application here you can see it is also   a basic step uh we are using axios for connecting  our back-end application where it is access   for connecting our front-end application  with the back-end server we are getting   the if it is success response we are getting the  data and storing in the data variable if it is   failure response we are handling it after getting  every single data we are after getting the data   we are using mac method uh for doing operation  in the every single data in every single data we   are converting the buffer array to the base64  sync after converting the base64 string after   converting the buffer array into base64 string we  are displaying it as an image that's it i hope you   have learned something new if it so just click  on the subscribe button do like this video and   share as much as possible thank you for  watching my video tata bye bye cheese love you

Channel: sahul

Views: 49,714

Keywords: nodejsImageupload, multerimageupload, reactwithmulter

Id: NzROCbkvIE0

Length: 41min 33sec (2493 seconds)

Published: Mon May 02 2022