Node.js Express Project to Upload Image Buffer & BLOB Data to MongoDB Database & Display it Using JS

foreign we will basically be inserting a blob or image buffer data inside our mongodb database and we will be showing the images after they are uploaded so I have done the similar video using mySQL database but this will be slightly different we will be using mongodb database inside node.js Express and we will not be inserting images inside the folder inside server we will basically be inserting The Blob image or buffer data inside our mongodb so you will see this is the database currently there is one image let me delete this and start from scratch so you will see this this is the table which automatically gets created when you run this application and now there is an option right here we can upload images so basically I can give any name here and if I choose file I can select any PNG or JPG file and then we have got a button out there if I click upload image I will be redirected to the new route where I will be showing all the images you will see this is the name of the image and this is the actual image which is uploaded if you open the image URL you will see it will contain this base64 code here and you will see how we are displaying this image from the mongodb database we are creating the blob data we are converting it into base64 so that's we are displaying it inside the image tag so this is the actual base64 code that you can see right here we have used the same concept while we did the MySQL video how to insert blob data inside MySQL and read that data so in the same in the similar manner we will be doing it inside mongodb and if I once again choose another file click upload image you will now see two images will be there and if I refresh the database you will see two images will be inserted and we are storing the ID here which will be unique every time whenever a new record is created then we have got a name of the image you can see that and then inside this image object guys we have got the base64 data this is the binary code of the data guys which is there and content type name type is the actual extension of the image which is image slash PNG you can also see this is also image slash PNG this is binary data of the image which gets uploaded so once again if I try to choose a file click on this upload image you will see that now three images are there you can see you will see that so as soon as I am uploading these images guys it is reflecting back in the mongodb database as well so we will try to basically build this application and if you check my server folder guys I haven't created any folder where we are storing this image files this is all we are storing it inside the memory we are using Malta library for memory storage and we are basically after uploading we are storing the base64 code or sorry this is the binary code blob data we are converting The Blob to a binary data and then we are showing it inside the image tag so all the source code guys of this tutorial I have given in the description of the video If you want to get all the source code you can go to the description of the live stream and copy paste all the source code so now let's get started by building this application so uh the very first thing we will do guys we will delete all the source code and start from scratch so what I will do delete this and you need to create a brand new node.js project for this so simply say npm init Dash y so this will create the package.json file now you need to install the express dependency which will be the web server we also need to install the malta Library which will handle the file uploads for us and also in order to interact with mongodb we also need Mongoose so install these State dependencies guys so once you install this I have already installed it so now what I will do is that I will make a index.js file so now we will start basically the express server so we will say Express we need to require this Express server and here we also require malter and also we will require Mongoose Library so just require this also so then guys we will basically make a new app and basically you will listen on Port 5000. so we will see app is listing on Port 5000 and then guys what we need to do is that we need to basically assign some middleware functions so we will say app.use and then we will say express.static we will basically pass public directory here so here we will create a public directory guys and inside this we are making this directory as static so that we can save static files here and also we need to basically pass this middleware function which is Express URL encoded and extend it to false and also we need to set the view engine which is ejs so sorry I also need to install the view engine dependency and PMI ejs so simply install this also so after this guys what we need to do we need to connect to mongodb database so we would use Mongoose connect and here we will pass the string mongodb localhost 27017 this is the port number on which mongodb is running and here we will pass the database name so let me pass a different database let's suppose blob images and we need to pass these two options which is use near use new URL parser this will be true and the second option will be use Unified topology to true so these two options we need to pass here guys so now if I reload the application what you will see is that we will be basically be connected to the mongodb database here and if I now say nodemon index.js you will see a router use requires a middleware function but got a string uh sorry let me just fix what is the problem here just fade guys I'm just seeing the problem uh just wait first of all just require this dependencies here and just fit here and Mongoose connect to mongodb so here we need to write this code here such as 270 node mongod you also basically need to start this mongodb server guys so inside your services you need to start mongodb service so just go to services and there is basically a service which is running on mongodb just search for this service mongodb and here you need to start the service so uh let me just show you this basically it's a service mongodb you can see bongodb server So currently it is running so you need to start this service if you face any sort of problem so after you do this basically if you go to if I check here uh let me change this database to Let's suppose mongodb images if I refresh this application so you will see now it is not having any sort of error and if you see basically it has created this table if you check here mongodb images so for this you just need to refresh it so simply say reload data so once you refresh this basically what it will happen for for this to happen you also need to create the schema guys because we now have just connected so we now we just need to define the schema so for the mongodb so for defining the schema it's very simple we will say image schema and we will use this method of mongoose which is schema method and here we will pass the actual data that you want to store so we will store the name of the image we will take this name from the user and then we will have this image object which will have the data which will be of type buffer this will be a blob data or any sort of buffer data of the image and then we will store the content type this will be actual mem type or extension of the image so this is basically the schema now we need to define the model so we will call this as image and model is basically a table it contains a model method and here you will pass image and here you pass the image schema that's all so what it will do guys it will create image table inside this database which is mongodb images and if you now refresh it now hopefully it has created this table if you refresh it you will see that mongodb images database is created and inside this this we have this images table so now it has created this collection collection or model guys anything you call it so after you do this we just need to set up Malta dependency we are including it you will see at the very top so for configuring it malter it's very simple we need to have the storage so for this we will use the memory storage method of monitor and here we'll pass malted Constructor storage to the storage that we have defined that's all so after that guys we will Define the routes so whenever someone goes to the home Home Route what we will basically return a simple template which will be index.e.js so now you just need to create a views folder right here and inside this just create index.e.js so this will basically contain a simple form guys where the user can basically submit the select the image from the computer so I will just copy this and explain to you all this code is given in the description so it contains a very simple form guys you will see we are making a simple post request to slash upload and we are also providing encoding type multi-part form data we are basically taking the name of the image and the actual image as well so we've given the name attributes you will see that this is necessary we have got a button and then we have got a href tag where we will be retracting the user to the uploaded images so if you go to now localhost 5000 you will see this form so we have got this form guys you will see that if I click this button nothing will happen if I select the image or to this cannot post upload so we need to make this post request so right here you make this post request so inside this post request guys what we will do is that we will upload this image using the blob data so how we can do that so we will make a new image and New Image we will use it and inside this we will pass the name of the image which we will get using request dot file dot original name and we will basically have the image object so this image is coming from guys this schema that we defined so we have got the name defined and then we need to now Define this data and the content type so inside the data guys what we will do this will basically request.file.buffer so this buffer basically represents the blob data or buffer data of an image and then we will have the content type in this case we will get using request.file dot meme type that's all so now after this guide you will save this image to mongodb so for saving it you just need to make this function as async guys and also we need to pass this into the middleware which we will defined upload.single so this will be the name attribute that we have defined so this is of the multi dependency so that we have defined so first of all the image will be uploaded inside the memory storage and then it will get this buffer data all that stuff now we need to save it so we will use a weight and we will call the save method of mongodb that's all this will save this image inside the mongodb database and then we will redirect the user to slash images so what it will do guys basically if you see now if I refresh it if I select this image click cannot get slash images but if you check your database one image will be there if I refresh this database one image will be there guys you will see this image data is contained you will see this is the binary data and now we just need to Define this images route so when someone goes to this we need to Now read all the images from the database The Blob data so we will simply say here request response and how to read all the images guys it's very simple we will say await again we need to Define this function as async you'll say image and it contains a find method guys and we will sort this we will just apply some sorting and we will basically display the all the images which are uploaded latest we'll get the latest images by providing the ID parameter to -1 that's all so this will now we will render out this template of images ejs we will pass this images as data like this this is basically an array of images which are returned to us using this find method so what it will do it will basically fetch all the images which are present inside mongodb now we need to Define this images dot ejs file guys so we'll Define this right here so inside this file guys this is really simple code here where we Define all these images so what I will do is that I will simply paste this code this is slightly complicated but I will explain to you so what is happening right here guys you will see we are displaying the images we are using some ejs syntax using this if statement so if the array is array length is greater than 0 then we are running this code then we are using the for each Loop for each image we are displaying the name image.name and then for the image data we are converting this we are displaying content time base64 code of the image and for this we are using this two string method we are passing base64 that's all and if you don't upload any images then we are showing no images uploaded yet this is basically the code guys and now if you refresh this application your images will be shown here you can see this is one image is present if I delete this image let's suppose from the database if you refresh it no image is uploaded yet so again if you go to the front end upload image you will see that so two images are there you will see that so in this way guys you can basically read and write blob data inside mongodb database using node.js Express using the Mongoose library and monitor Library all the source code is given in the description of the video if you like this video then please hit that like button subscribe the channel as well and I will be seeing you in the next live stream

Channel: Coding Shiksha

Views: 6,160

Keywords: coding shiksha

Id: KRVh0d9ECoI

Length: 19min 9sec (1149 seconds)

Published: Sun Mar 12 2023