Multiple Image Uploader Using Node Express & MongoDB

hey everyone and welcome back to daily tuition in this video we are going to learn how to create this beautiful node image uploader project using node express and mongodb in this project i'm going to upload images in the mongodb database and display them one by one on the page in this project we're gonna learn how to work with mvc pattern to create a large project we're gonna see how to follow the programming principles then we also understand how to work with handlebars template engine then we understand how to store all the images in the mongodb database as well as we're gonna store all the images in the upload folder of the server you will also understand how to make the backend api for this project and you will learn a lot more than this i will explain each and every step to make you feel more comfortable so let me show you a demo of this project so in the project i'm going to create this page where i'm going to have the title the subtitle the input type file text box and the upload button using this input type file text box i'm going to choose my images and upload them in the mongodb server so let me show you if i click on this choose images this will open a new window and here i'm going to select my images i'm going to select all these four images like this and click on this open button we are going to learn how to upload multiple images at the same time so i'm going to choose four images and click on this upload images button when i click on this button it will take few seconds to upload all your images in the mongodb database and display them in this browser like this so once the images is uploaded in the mongodb database you will get the response back and you will have all your images inside the bootstrap card this is the beginner friendly tutorial so if you want to be a full stack developer then this is the right tutorial for you follow me to take a step ahead to be a full stack developer so before getting late let's get started let's get started and see how to create this beautiful node project using express what i'm going to do is i'm going to open the visual studio code editor and inside it i'm going to open my empty folder this is my tutorial empty folder and inside it i'm going to create a new folder so i'm going to click on this new folder icon and specify name to this folder image uploader if you want to specify any name to this folder that doesn't matter this is just a project name just for that i'm going to open my new terminal so here i'm going to say terminal new terminal and using this terminal i'm gonna initialize this project as node project so i'm gonna first enter into this image uploader folder so here i'm gonna say cd image uploader and press enter once i enter inside my image uploaded folder let me just clear the screen and here i'm going to say npm init this command will create package.json file and initialize this project as a node package i'm going to specify hyphen by flag with this command to skip all the questions when i press enter this will create package.json file inside this folder and this will initialize this project as node package just for that let me just clear the screen and open the package.json file and here i have all the details of my project now let me just install some modules which we're going to use inside this project so let me open the terminal and here i'm going to say npm i for install and then i'm going to specify modules so here i'm going to say express i'm using express to create http server then i'm going to say nodemon nodemon is a node module that allows you to restart the server whenever you make any changes inside your server file just after that i'm going to say express handlebars now this module allows us to create different views in express application using this module i'm going to create a view for this express application just for that i'm going to install muter node module muter is a node.js middleware for handling multipart form data which is primarily used for uploading files so i'm going to use these modules and press enter when i press enter i'm going to have all these modules inside my node modules folder so this will create a node module folder and inside it i'm gonna have all these modules just for that let me just clear the screen close this terminal and then i'm gonna create my server.js file so inside this image uploader i'm going to create a new file server dot js if you want you can specify any name to this file and just for that i'm going to just back to the package.json and create a start command so i'm going to specify here comma and specify start command so here i'm going to say nodemon server.js node mod is allows us to restart the server whenever we make changes inside this server.js file so i'm going to just save this file close this package.json and back to the server.js and here i'm going to create my http server so let's take a look at how to create the http server using express now let's get started and see how to create the http server i'm going to use express module to create http server so i'm going to open the server.js file and here i'm going to say constant express is equal to and require the express module then i'm going to say constant app is equal to and create an instance of express application just for that i'm going to say constant path is equal to and require the path module now just for that i'm going to say here app.use i'm going to call use method of express module use method is allows us to call different middle layers in express application so here i'm going to call express dot json this statement allows us to post raw json data when we make a post request just for that i'm going to just serve the static files so here i'm going to create a command and say serving static files and just after that here i'm going to say app.use as i said earlier i'm going to use use method to call different middlewares just sort that here i'm going to say express dot static i'm going to call a method of express application which is static this method allows us to serve static files as a first argument i'm going to specify path so here i'm going to say path dot join and as a first argument i'm going to specify directory name this variable refers to the project name just sort that specify here comma and space for second argument and then i'm going to specify here my folder name public right now i don't have this folder inside my project directory so let me just create this folder inside this image uploader i'm gonna create a new folder so i'm gonna click on this new folder icon and here i'm gonna say public inside this folder i'm gonna have the css file so i'm gonna save the changes let me just create my css file here so inside this public i'm gonna create another folder css and inside the css i'm going to create a new file called style.css i'm going to add my project styling inside this style.css file and just after that down here i'm going to create my routes so here i'm going to create my first route so here i'm going to say f dot get i'm going to make a get request on the root path so i'm going to space over here forward slash speed of a comma here and then i'm going to pass here a callback function so here i'm going to say request and response i'm going to pass two parameters to this callback function so when we make get request to this root route i'm going to call this callback function and inside it i'm going to say response dot send and i'm going to send here a data h3 and i'm going to just close this h3 heading tag and here i'm going to say express server let me just save the changes just start that down here i'm going to just listen the server on port 3000 so here i'm going to say app.listen and as a first argument i'm going to specify the port name i'm going to say here 3000 if you want you can create a dedicated port name variable as well for this parameter just for that i'm going to call here callback function to display a message to the user so you can i'm going to say console.log and in the backtick operator i'm going to say server is started on http localhost and then i'm going to specify here 3000 like this don't forget to specify semicolon save the changes and open the terminal and now i'm going to just execute this start command this one node 1 server dot yes so to execute the start command i'm going to say npm start that's it when i press enter this will execute this nodemon server.js command and here i'm going to have a message server is started on http localhost 3000. let me just open this link on my browser so when i click on this link i'm going to have the results something like this so on localhost 3000 i'm gonna have this message express server next i'm gonna show you how to initialize the handlebar view engine and send the html file as a response now once the server is successfully started let me just close this terminal and close this package.json file open the server.js and here i'm going to require a module and say here constant hbs for handlebars and then i'm going to just require a module called express handlebar this module allows us to create views in express application so just down here here i'm going to create a command setup view engine so i'm going to just specify the template engine for this express application so here i'm going to say app.set and inside this set i'm going to set the view engine and the view engine is going to be hps so all the extension of my html file should be hbs just out of that i'm going to say here app.engine and then i'm going to specify single quote and say hbs and then i'm going to just initialize this hbs so as a second argument i'm going to call this hbs module and just out of that in the parenthesis in the object i'm going to just call some arguments so here i'm going to first pixel extension so here i'm going to say ext name means extension and then i'm going to specify here extension in the single code i'm going to say hbs so this is the extension of my template files just for that i'm going to specify the default view it's going to be default we'll take a look at what is the use of this default view after a few seconds but just for now i'm going to say here default view then specify comma and say here layout directory so here i'm going to specify double underscore director name this refers to my project directory and then i'm going to concatenate my views folder so in the single code specify forward slash and then specify fields folder here whenever you want to specify path use path module so instead of this statement here i'm going to say path dot join and inside the join as a first argument i'm going to specify my current project director name using its directory name variable specific comma and in the single code i'm going to say vios using join you don't need to specify here forward slash or anything like that just for that here i'm going to specify comma and then specify partial directory inside the partial directory property i'm going to specify the directory name but i'm going to have all my partial files so here i'm going to say path dot join and specified dr name as the first argument and in the single code i'm going to say views forward slash partials so inside these views i'm going to have a folder called partials and inside it i'm going to have the partial files of this view engine let me just save the changes and create this view and this partial folder so inside this image uploader i'm going to create a new folder so i'm going to click on this new folder icon and say views and inside these views as you know i have this partials so i'm going to click on these views and create a new folder called partials now once we initialize this view engine successfully let me just create my handlebar file so inside these views i'm gonna create a new file so i'm gonna click on this new file icon and create a file main dot hbs as i said earlier to create handlebar file i'm gonna specify extension hbs once i create this file inside it i'm going to create my html5 snippet so here i'm going to specify exclamation mark and press enter this statement will create a simple html5 snippet inside this handlebar file now just for that inside this title here i'm gonna say image uploader and in the body i'm gonna create h three heading tag and specify title express view engine save the changes and then i'm gonna send this file instead of returning this simple h3 heading tag so instead of this h3 heading tag i'm gonna return this handlebar file so i'm gonna just get it off this statement right from here and get rid of this send method as well and instead of send i'm gonna say response dot render i'm gonna call a render method of response object in the single code i'm gonna say main now the time is to explain this property now this property is actually refers to the main dot hbase file this one i just present the default value to this property it means it refers to the main.hps file for example let's say you want to change this file name you want to specify this file name to index.hbs you can do that as well when you change this file name index.hbs you need to specify the index as a default value to this property so when you execute your express application handlebar will automatically locate the index file and return as a response i'm going to leave everything as default save this file save this file as well and back to the server.js and as you can notice here i just returned the main file now let me save the changes back to my server and let me reload the browser when i load the browser as you can notice i'm gonna have here a message express view engine so this will just return the html file as a response now let me open my finished project and show you the design and as you can notice it looks amazing i'm gonna first specify the title the subtitle and here i'm gonna add input type file text box and using it i'm gonna choose my images and then i have here upload images button and using this button i'm gonna upload multiple images inside my mongodb server i'm using mongodb cloud database to store all these images as you can notice here i have 4 images inside my mongodb database once i upload all these images i'm going to just display all the images one by one inside a grid system of bootstrap so let me first show you how i can design this beautiful page and then we'll move to the server side so to create this beautiful design let me just back to my project and then back to the main.hps and using this file i'm going to design this project now instead of creating a complicated html structure inside this main file i'm going to just divide this main file into three parts so i'm going to create a partial files of this main file i'm going to grab this header from this opening body i'm going to grab it so i'm going to cut this header from this main file and create a partial file inside this view i'm going to create a partial file and name this file header.hps and inside this file i'm going to put that header save the changes back to the main.hps grab this footer so i'm going to grab this closing body and html save this file and create a partial file inside this folder and name this file folder.hps inside this file i'm going to paste this closing body and closing html tag save these changes back to the main file and instead of this h3 heading tag i'm gonna just put this heading tag inside the index file so i'm gonna get this h3 heading tag and create a new partial file inside this partial folder and here i'm gonna say index.hbs and i'm gonna put my h3 heading tag here like this back to the main file and here i'm gonna import all these three partial files so here i'm gonna simply create a command so i'm gonna press ctrl forward slash this will add a command syntax just after that here i'm going to say header partial file and just about that i'm going to call the handlebar syntax to call this partial header file so here i'm going to call double curly braces and inside it i'm going to call the angle bracket and then here i'm going to say header so this dead man is going to call the header at this position just after that down here i'm going to create a command and say here body partial file just down here i'm gonna call handlebar syntax for including partial files and here i'm gonna call the index file just after that i'm gonna create here a comment again and here i'm gonna say footer partial file and i'm going to include the photo file as well using this handlebar syntax like this save this file oops i think i misspelled the header spinning header back to your server and you reload the browser you will get the same result so as you can notice the partial files are working fine let me use back to my project and open the header.hbs and here i'm gonna first link the style.css and add the bootstrap framework so i'm going to open a new tab and here i'm going to search for get bootstrap.com i'm going to open the getbootstrap.com website and from here i'm going to get the bootstrap library so i'm going to click on this get started and copy this link this css link and paste it in the hair section of this website so in the header file i'm gonna press this bootstrap link just for that here i'm gonna create a command and link my custom css file so here i'm gonna say link and then in the hdf attribute i'm going to say css forward slash style dot css so i'm going to just specify this css folder and the style.css file i don't need to specify the absolute path of the css file because as you can notice this statement is going to serve the static files from the public folder so i don't need to specify the public folder inside this path save this file and save this file as well now to create this beautiful template i'm going to open index.hps file and inside it i'm going to create this beautiful template so i'm going to create here a command and say section so i'm going to start a new section here copy this command paste it down here to indicate this is the closing section tag and here i'm going to say section and specific class to it which is section as well as i'm going to call the bootstrap class which is margin y 4 so this will add a top and bottom margin to this section tag when i press tab i'm going to have a section tag with the class section and margin y for just sort of that here i'm going to create a container class so here i'm going to say dot container and inside this container i'm going to create the title of this website so here i'm going to create a class title and inside this title i'm going to create h1 heading tag and specify title note file uploader or you can specify node image uploader that doesn't matter this is just a title i'm going to save the changes back to my project and reload it i'm gonna have the result something like this let me just zoom this out a little bit and just after that i'm gonna specify here text center post type class to send to this text and just after that i'm gonna add some padding so here i'm going to say adding y5 so this will add top and bottom padding to this division tag and just after this h1 heading tag here i'm going to create my paragraph to this paragraph i'm going to specify class subtitle and inside this paragraph i'm going to say upload images to the servers so i'm gonna just say here strong and inside the strong tag i'm gonna say here server i'm gonna save the changes back to the project and reload it i'm gonna have the result something like this just after this division tag just after this title right down here i'm gonna create a row and inside this row i'm gonna create a column so here i'm gonna say column four so this will create a division tag with the column size 4. in bootstrap we have 12 column grade system and from the 12 column i'm gonna specify four column space to this division tag if you don't know about bootstrap grade system i already have a dedicated video on it you can find that video from the description of this video just sort of that inside this column i'm gonna create a form so i'm gonna create here a form tag and i'm gonna just redirect this form to upload multiple route and inside this form i'm gonna add my input type file text box but before i specify it i need to specify here inscription type so here i'm gonna say inscription type multipart form data now in html forms there are three methods of encoding first is a url encoded second is a multi-part form data and third is a plain encoding just sort of that inside this form i'm going to create a new row and inside this row i'm going to create a column and then i'm going to specify space to this column which is it so this div have 8 column space from the 12 columns of bootstrap grid system inside this div i'm going to create input tag and this is a type of file just for that i'm gonna specify class to it which is form control which is a bootstrap class and then i'm gonna specify name images and then i'm gonna specify id which is form file just so that i want to upload multiple images at the same time so here i'm going to say multiple if you don't want to upload multiple images you can remove this attribute just out of that down here i'm going to create another column so here i'm going to say call to and inside it i'm going to say input type submit i'm going to create here a submit button of the type submit and just after that i'm going to specify class btn btn warning i'm going to use the booster class btn warning and a btn just for that i'm going to specify value to it so here i'm going to say upload images save this file back to the project and reload it when i load the project as you can notice i'm going to have the result something like this i want to center this input text box as well as this button so i'm going to say here to this row i'm going to specify justify content center booster class i'm going to specify this class save the changes now when i clear the browser i'm going to have this text at the center of the document now just after that let me add the bootstrap card right here like this so i'm going to just back to the bootstrap and here i'm going to search for cars copy this code so just after that inside this container right down here i'm going to create here a command and see here display images to indicate this is the closing display images i'm going to copy and paste this comment again and specify forward slash so this indicate this is the closing display images section so inside this i'm going to create a new section and specify margin top 5 so this will add margin top to this section inside this section i'm going to create a new row and inside this row i'm going to create a column 3. so i'm going to create here a division tag with the column 3 class and here i'm going to paste my bootstrap card like this don't forget to align this code properly save the changes back to the project and reload it as you can notice i'm going to have the result something like this now just like that let me just make some changes inside this card so what i'm going to do is to this card i'm going to add some shadow so i'm going to add here a booster class shadow just after that to this image i'm going to specify class img fluid this class will make this image responsive just like that here i'm going to say font pop-ins now this is my custom font class i'm going to create this class in the style.css after a few seconds just after that here i'm going to specify title to this card and here i'm going to specify title ui ux design just after that i'm gonna get rid of this card text and see here text secondary this class will specify gray color to this text and then i'm gonna specify font size zero nine this is my custom class which you are going to create inside these style.css just after that i'm going to get it out this btn primary and instead of btn primary i'm going to say here btn info as well as i'm going to specify font size 0 9 and text light and instead of this go somewhere i'm going to say here read more save the changes back to the project and reload it so i'm going to have the result what i want now just at that i want to add some custom styling to this html page so what i'm going to do is i'm going to back to the style.css and using it i'm going to add some custom styling to this html so the very first thing i'm going to do is i'm going to change this font family so i'm going to open a new tab and here i'm going to search for google font and from this google font website i'm going to select my favorite fonts so i'm going to select this roboto font and i'm going to select the regular style and then i'm going to select pop-ins font and i'm going to select the regular style from this one and just start that i'm going to choose the import statement copy this import statement and paste it in my style.css at the top right here like this just out of that here i'm going to specify body and inside this body i'm going to say font family roboto and specific callback value which is this one sans serif so i'm going to call this callback font so if the roboto is not available i'm going to just display this fallback value just after that here i'm going to create my custom class which is font pop ins and then i'm going to call here this font family and instead of roboto here i'm going to say poppins just after that i'm going to create my custom class which is font size 0 9 and here i'm going to specify font size to the text so here i'm going to specify font size 0 9 em save the changes i'm going to have the result something like this and at the last i'm going to click on this input type file text box as you can notice i'm gonna have this border to this file text box when i focus on this input text box i'm gonna have this border i want to remove it and right here i'm gonna say input and when i focus on the input text box i want to just specify box shadow none and make sure to specify import statement overwrite the default property and outline is going to be none and then i'm going to specify important keyword save the changes you can notice i'm not going to have this border to this input text box so now the styling of this project is completely ready let's move to the back end of this website and add different functionality to this project now once we have our template let's move to the back end of this website where i'm going to create a beautiful api for this application so i'm going to just minimize these views and this public and inside this image uploader i'm going to create a new folder and i'm going to name this folder server in this folder i'm going to create the back end of this website so what i'm going to do is inside the server i'm going to just first create a new folder and name that folder router and inside this router i'm going to create my router file so here i'm going to create router.js so what we're going to do is instead of adding this router here i'm going to follow the programming principle which is separation of concern so i'm going to simply grab this code right from here i'm going to grab this route and paste it inside this route.js file right here like this and just after that as you know we don't have this app variable here inside this route so let me just create here an instance of route so here i'm going to say constant route is equal to and require the express module and i'm going to just call a method of express which is router so using this method i'm going to just create different route in this route file so i'm going to just specify this route right here instead of app i'm going to say here route.get just for that i'm going to leave everything as it is but don't forget to export this route because i'm going to use this route in my server.js file so here i'm going to say module dot exports routes like this save this file back to server.js i'm going to create here a command calling routes and here i'm going to simply say app.use and i'm going to just specify single code forward slash this refers to the root route and then i'm gonna specify require statement and i'm gonna require my router file so here i'm gonna say dot forward slash server router router.js like this so now i can use this get route in my server.js file now you can notice here the response of this route is only in one line but what if your response is more than 50 or 100 lines then the code looks ugly and it's hard to maintain your application so what i'm going to do is i'm going to follow the mvc pattern of programming so i'm going to just create a controller for this route so instead of this callback function i'm going to put this callback function in a controller so i'm going to just create a new folder inside the server so here i'm going to create a new folder and name that controller and inside this controller i'm going to create a controller file so here i'm going to say controller.js if you want you can name this controller file anything that doesn't matter and inside this controller i'm going to just call this callback function so here i'm going to say exports dot home so what i'm going to do is i'm going to create a home controller function and export that at the same time so here i'm going to say exports.home is equal to and then i'm going to call a function so here i'm going to say request and response and return an arrow function and inside this function i'm going to put this code response dot render so i'm going to cut this code right from here and specify that inside this controller file and instead of this callback function here i'm going to call my controller so i'm going to just require my controller here constant controller is equal to require and in the single code double dot forward slash to refer to the patent directory then i'm going to select controller and then i'm gonna select controller.js file like this and as a second argument to this get request i'm gonna say controller dot home i'm gonna just call this method save this file and save this file as well that's it your controller is now completely ready next i'm going to show you how you can upload different images inside your project using muted module now once you understand how to create a route for your application and how to work with controller let's take a look at how to work with muter node module so inside this server i'm going to create a new folder and name this folder middleware and inside this middleware folder i'm going to create a new file and name this file muter.js so inside this muter.js file i'm going to use muted module and store all my images inside this node application so what i'm going to do is i'm going to first say here constant muter is equal to and require the muter module this one just for that down here i'm going to set the storage so here i'm going to say set storage so you need to first inform the muter module where you want to store all your images so here i'm going to say muter dot disk storage using this method i'm going to specify where i want to store all my images inside my disk so inside this parenthesis i'm going to pass object and specify some arguments so the first property here i'm going to specify is destination using this property i'm going to specify where i want to upload all my images so here i'm going to specify value to this destination property and this is a type of function so here i'm going to say function and this function takes three parameter request fire and cb means callback and inside this function i'm going to say cb means callback then i'm going to specify first value which is no and second is the upload now here inside this upload folder i want to store all my images so i'm going to just create here a new folder inside my project directory and name that folder uploads so all my images are stored inside this upload folder so i'm going to specify that folder here as a second argument but what about the first argument why this argument is now now suppose the user uploaded something wrong then you can pass the error message using this argument right now i'm not going to do anything with this argument so i'm going to just specify here now so i want to store all my images inside this upload folder so i'm going to pass second argument uploads just for that here i'm going to specify comma and add second property which is file name using this property i'm gonna specify different file name to the uploaded image so for example if you upload an image one dot jpg i'm gonna just rename that image and specify different name to it so using this property i can specify unique name to all my images this property is a type of function so i'm gonna specify here function and this property also takes a request file and back as a parameter just out of that here i'm going to specify name to my file so i'm going to say here var ext i'm going to first get the extension of the file so here i'm going to say var ext so now i'm gonna get the extension of the file so i'm gonna say here file using this file variable i can access the uploaded file so here i'm gonna say file dot original name this property is going to return the original name of the file then i'm gonna say here dot sub str i'm going to call the service dr method of javascript and then i'm going to say file dot original name dot last index of and in the parenthesis in the single quote i'm going to say dot so this statement will return the extension of the file so for example let's say if i have a file name image dot jpg then this statement will return this extension to this ext variable that's it just for that down here i'm going to say cb the callback function now as a first parameter i'm not going to validate anything here so i'm going to specify no and as a second argument i'm going to specify the name of my file so here i'm going to say file dot file name then i'm going to concatenate and add dash to that file name along with that i'm gonna concatenate the data as well so here i'm gonna say plus date dot now so i'm gonna just concatenate the current date and then i'm gonna concatenate the extension so here i'm going to say ext now just for that once you initialize your storage you need to inform this muted module to set this configuration i'm going to just specify here store is equal to muter and then call parentheses and in the object i'm going to specify argument so i'm going to say here storage and then specify this configuration so here i'm going to create a variable var storage is equal to and i'm going to pass this storage right here like this if you want you can change this variable name as well that doesn't matter and just for that don't forget to export this store variable so you can use this function in other modules so here i'm going to say module dot exports is equal to store like this let me just simplify this statement instead of this i'm going to grab this statement and specify that here like this both statements are identical save this file and now let's create a new route inside your router so we can access the user image and upload them inside this uploads folder so let me show you how to do it so what i'm going to do is i'm going to just get image and then upload that image inside this upload folder so here i'm going to create a new route for that so here i'm going to say doubt dot post i'm going to make a post request of http server and in the single code i'm going to say forward slash and here i'm going to pass my form action attribute so let me just open the views open the index.hbs this one and as you can notice here to this form i just specify the action attribute which is upload multiple i'm gonna specify this path to my route to this post route like this so when i click on the submit button of this form this will call this post route let me just close this index file just after that as a second argument i'm gonna pass my middleware this one the mutual middleware so here i'm gonna just call this middleware so i'm going to first require it so here i'm going to say constant store is equal to and require in the single code specify the parent directory and then i'm going to call muter file muted.js just out of that as a second argument here i'm going to say store dot addy and in this array i'm going to pass images now let me explain what is the meaning of these images so i'm going to just first specify the storage and pass area to it and in this array i'm going to just pass this images because if we just take a look at this index.hvs right here then you can notice here the name of this input type file is images so i'm going to just get all the images uploaded using this input type file and pass that to this storage so i can store all that images inside my upload folder because i'm uploading multiple images at the same time i'm going to pass here adding if you want to upload a single image you can pass here single i'm uploading multiple images at the same time so i'm going to specify here at it now i want to set the max limit to the upload so here as a second argument i'm going to specify 12. so using the statement i'm going to limit the user so user can only upload 12 images at once just after that once i have my middleware once i upload my image inside this uploads folder let me call here my controller so here i'm going to specify comma and pass my third argument so here i'm going to pass my controller so inside the controller.js i'm gonna create a new function so here i'm gonna say exports dot uploads and then i'm gonna pass here a function with request response and next function just for that i'm going to pass here an arrow and then i'm going to call this controller inside my router right here i'm going to say here controller dot uploads so when i make a post request using my form it will first store these images inside this upload and then execute this upload method save this file back to the control.js and let me just print my images first so here i'm going to say constant files is equal to and using request dot files i can access all my images because as you can notice here i pass this middleware to this post method this middleware is going to create a property called files so i can access that files property using request object so once i have my all files using this property i'm going to store that inside this constant variable and print it before i print it let me just solve the errors so here i'm going to say if if i don't have these files i'm going to say here constant error is equal to i'm going to create a new error object i'm going to just initialize this constant variable as new editor and in the single quote i'm going to say please choose files just out of that here i'm going to say error dot http status code and return the 400 http error code just after that i'm going to say here return next and return the error message with this next function if there is any error inside this file i'm going to just exit from this function just after that down here i'm going to say response dot json and in the json i'm going to say files like this save the changes save this file as well save all your files and now execute your program so let me just choose my images so i'm going to click on the choose files so i'm going to choose this first image and click on this open button so now once i have my first image let me click on this upload images oops i think something is missing here upload multiple let me just open my index.hps and let me check this code yeah right here i need to add a method attribute which is a type of post save the changes close this index file reload it and choose your image again i'm going to choose this first image click on this open button and click on this upload images as you can notice when i click on it here i have the result what i want it's going to return the it's going to return the field name the original name of the image and all the information of the image now let me just zoom this up a little bit and if you just close your look at this statement then you can notice i'm gonna get the response as an array format i'm gonna have adding and inside that array i have this object and inside this object i have all the information of the image now at this time you can notice here to the file name i'm going to get undefined the path is also undefined because i think i misspelled something and open the muted.js file and right here i just specify filename i don't have this property to the file object i want to access this field name instead of file name because using this property i'm going to specify the name of the file and instead of file name here i'm going to say field name like this save the changes and reload this browser as you can notice i'm going to have images inside this path and the file name is also renamed so now once i have my image let me show you how can upload multiple images let me just back to my project and open the uploads folder here you can notice i have two images inside this uploads this is the first one which is the undefined image and the second one is the images let me upload multiple images inside these uploads let me show you how to do it and let me just zoom this out a little bit and let me just upload multiple images i'm going to reload the browser and choose multiple images so i'm gonna choose this first second third and this fourth image and click on this open button once i choose all these four images i'm gonna click on this upload images let me just zoom this a little bit so now you can notice here i have all my four images as a response so i can access all the information of this image using this array and now if you back to your project then you can notice here inside this uploads you have your images each image is unique i'm going to use this date object to uniquely identify each image now once you understand how to upload all these images inside this upload folder you can display all these images on the front end i'm not going to do that because i'm going to show you how you can upload this images in the mongodb cloud database and display that mongodb database images to the front end let me show you how to connect the mongodb database to this project so let me show you how to connect the mongodb database to this project so i'm going to just back to my browser and open a new tab and here i'm going to say db and i'm going to choose the mongodb.com website and from here i'm going to click on this sign in button and sign in on this mongodb atlas so i'm going to log in with my google account if you want you can specify your email address and sign in with your email address as well if you don't have mongodb atlas account clicking on this sign up button you can create it once i sign in i'm going to have the result something like this you will have your mongodb projects i already have project inside this mockup so i'm going to create a new one so i'm going to click on this new project and specify the project name i'm going to specify project name image uploader and then i'm going to click on this next button and just after that here i'm going to set the permission to this mongodb database i'm not going to do anything right here i'm going to click on this create project this will just take few seconds to create a mongodb project just for that you need to create a cluster inside this mongodb class so i'm going to click on this build a cluster and create a free cluster so i'm going to click on this create a cluster for free then i'm going to choose the cloud provider which is aws choose your nearest region i'm going to choose my nearest region of the server and then i'm going to just choose the cluster name and i'm gonna specify cluster name uploader click on this create cluster to create a cluster in the mongodb database mongodb will take between one to three minutes to create a new cluster so now once you have your cluster i'm going to specify the database access using this database access security i'm going to click on this database access and here i'm going to add a new user so you can access this database click on this add new user and inside this password i'm going to specify the username which is admin and password is going to be admin123 i'm going to click on this add user button to create a new user with this username and password now just out of that once you have your database access username let's set the network access i'm going to click on this network access and add my ip address here so i'm going to click on this add ib address i can click on this add current ip address here but i don't want to display my ip address so i'm going to click on this allow access from anywhere like this and click on this conform once the status is active back to the cluster and click on this collections right now you can notice i don't have any data inside my collections so i'm going to use my project to store all that images and store that inside the mongodb collection let me just back to my cluster and i'm going to just back to my project and here i'm going to create a new folder with the name database and inside this database folder i'm going to create a new file database dot js and now i'm going to install the mogus module and connect the mongodb database to this project so i'm going to open my terminal open a new terminal by clicking on this plus button like this enter in your image uploader directory and see here npm install mongos i'm going to install this mongoose module inside my project so once i have this module installed let me just back to my first terminal close this panel and here i'm going to say constant mongoose is equal to and require the mongoose module this one just start that down here i'm going to say constant and create a function connect and to this connect i'm going to pass a synchronous function so here i'm going to say async pass parenthesis and specify my arrow like this and in the try and catch block i'm going to add my code in the cache here i'm going to cache the error so in the parentheses i'm going to say err i'm going to create an object of error console.log and i'm going to print this error and then i'm going to say process dot exit and return one here and in the try block i'm gonna just set the connection of mongodb so here i'm gonna create a command mongodb cloud connection and down here i'm going to say constant con is equal to and call await and then here i'm going to say mongoose dot connect i'm going to call a method of mongo's module which is connect this method is going to take the mongodb uri so as a first argument i'm going to pass the mongodb uri i'm going to create a separate file for that instead of creating dot env file i'm going to create a javascript file in the root directory of this project so here inside this image uploader i'm going to create a file config.js and inside this file i'm going to say constant config is equal to and pass object and to this object i'm going to specify property uri and to this uri i'm going to pass value so in the double code i'm going to pass a mongodb uri i'm going to just back to my cluster and here using this connect button i can get the mongodb uri i'm going to click on this connect and click on this connect your application and here is the mongodb uri i'm going to copy it close this model back to the project and inside this double quote i'm going to paste that uri and just after that i'm going to change a few things here as you know i have the username admin and the password is going to be admin one two three just after that i need to specify the database name as well inside this uri i'm gonna say here uploader and save this file just after that don't forget to export this config so here i'm going to say module.exports is equal to config close this file back to the database.js and require this config file here i'm going to say here constant config is equal to and require this file inside this project and just after that i'm going to use this config to specify uri of mongodb so here i'm gonna say config dot uri and then i'm gonna pass at the second argument so here i'm gonna specify an object to remove all the unwanted console message so here i'm going to say use new url parser which is true then i'm going to say use unified topology true then i'm going to specify use find and modify which is false and use create index is going to be true now you don't have to worry about this properties this is just for avoiding unwanted warnings in the console message and just down here i'm going to say console.log and in the backtick operator i'm going to say mongodb connected and now i'm going to display the connection host so here i'm going to say dollar in the curly braces i'm going to say con dot connection dot host save this file back to the server.js and call this database file here so just down here i'm going to create a command and say connect mongodb database and here i'm going to say require and inside it i'm going to pause server then i'm going to pass the database folder and then i'm going to pass my database file and inside this file as you know i'm going to just return this connection function so i'm going to just call this function like this i'm going to just pass parentheses just out of this require so this will execute this connection function automatically and now before i save this file let me open my terminal right now i'm going to just get here server is started message but when i save this file you can notice oops require is not a function inside my database file yeah right here down here i'm going to say module dot exports is equal to connect so i'm going to pass this function to this exports open the terminal and now save the changes now when i save the changes you can notice i'm gonna have a mongodb connected console message as well whenever you start your server so now your mongodb database is successfully connected to your project next i'm gonna show you how can create a beautiful scheme in mongodb database and store all that images now once you understand how to connect the mongodb database to your project let me show you how to create schema in mongodb when you create a mongodb database you need to specify the structure of your database or you can say you need to specify the structure of your collection for that we use schema so how can i do it so to create a schema i'm going to create a new folder inside my server folder right here i'm going to create a new folder and name this folder model and inside this model i'm going to specify the structure of my database so here inside this module i'm going to create a new file and name this file schema.js if you want to specify any name to this file that doesn't matter and just out of that here i'm going to just require the mongo's module so i'm going to say constant mongoose is equal to and require the mongoose module just so that using this mongoose module i'm going to create a structure of my database or you can say a schema of my database so here i'm going to say constant and create a variable upload schema is equal to and then i'm going to say new mongoose dot schema so i'm going to create a new instance of mongoose schema object and inside this parenthesis i'm going to pass curly braces and inside this curly braces i'm going to specify the structure of this collection so here i'm going to first specify my first field which is file name i'm going to store file name in the database so i'm going to specify here file name it is a type of string so i'm going to say here type string and then specify unique is going to be true i want to uniquely identify every file so i'm going to say here unique true then i'm going to say require true just for that down here i'm going to specify comma and create my second field so i'm going to say here content type and i'm going to specify here an object and inside it i'm going to specify type of content so here i'm going to say type and this is also a type of string i'm going to store string values inside this content so here i'm going to say string and say here required true just have that specific comma here and specify my third field which is image base 64. and then i'm going to specify the type of field so in the curly braces here i'm going to say type it is a type of string and then specify required true that's it and at the end down here i'm going to say model dot exports is equal to create a variable upload model and then just specify equal to sign and say mongoose dot model and just out of that as a first argument i'm going to specify name of my model or you can say i'm going to specify name of my collection here i'm going to say in the single code uploads so mongodb will create a collection called uploads inside my database and i'm going to specify structure for this collection so i'm going to pass this object as a second argument to this mongoose model method like this and then i'm going to store this model inside this variable and export it that's it now just sort of that once we have the mongodb schema let's move to the controller and here i'm going to just access that mongodb schema and store all these images inside my mongodb database so up here i'm going to just say constant and call the upload model using required statement like this so here i'm going to say double plot forward slash model and then i'm going to pass my schema.js file so once i have my model here let me just store some data inside it so just after this if statement down here i'm going to use this model so what i'm going to do is here i'm going to first iterate over my images as you know this statement is going to return an area of images so i'm going to first iterate over that images and convert that images into base64 encoding so here i'm going to create a command and say convert images into base 64 encoding base64 encoding is a way to convert data into ascii character set the size of the base 64 encoded is the actual size of your original data so i'm just converting all my images into base64 encoding and then i'm going to store that in my mongodb database here i'm going to just say let imj add i'm going to iterate over my array of images so i'm going to create here a variable img array and see here files dot map i'm going to call a javascript method map to iterate over array and then as a full style command i'm going to pass callback function with a parameter file if you want to specify any name to this parameter just after that inside this file inside this callback function i'm going to just create a variable let img is equal to and inside this img variable i'm going to store my images as a buffer data and then i'm going to convert that buffer data into base 64. so what i'm going to do is here i'm going to call the fs node module so before i use it i need to import that module so here i'm going to say constant fs is equal to and say require fs fs is an inbuilt module in node you don't need to install this module manually you just need to require that module to use it so here i'm going to say fs dot read file sync this method is going to buffer your image and store that in this img variable if you print this variable you will get the buffer data so here in this read file sync i'm gonna pass my file path so here i'm gonna say file dot what so i'm gonna pass my file path inside this method so this method is going to convert your image into buffer and store that in this variable if you want you can print this variable on the console to see how buffer looks like just start that down here i'm gonna say return and i'm going to just return from this function and here i'm going to say img dot 2 string and i'm going to convert this img into base 64. so i'm going to store this buffer into base64 format and store that in a variable so here i'm going to say in code image and store that in this variable and just return that variable using this return statement and then i'm going to store this encoded image inside this imgra so this variable is going to return an array of base64 image so now when you print this img array you are going to get all your selected images as base64 format let me show you the result first so i'm going to just copy this img array and return that as a response save this file back to my project and now let me reload it let me choose my image so i'm going to choose two images this time and click on this open button and when i click on this upload image as you can notice you will have the response something like this this is the base64 format of your image i'm going to store this data inside my mongodb database to access my image this is just an encoding of your image you don't have to care about this data so let me just back to my project and right down here i'm gonna say img add a dot map so i'm gonna just iterate over this img array because this statement is going to return as an array inside this variable so inside this img array i have multiple images so i'm going to just iterate over that images using map method so inside this map i'm going to call callback function so here i'm going to pass source and index and now inside this map method i'm going to create and store this data this base64 image in my database so here i'm going to create an object for that so let me first create here command and say create object to store data in the collection what you can say in the database so here i'm going to select final img is equal to and create an object here and just after that i'm going to first specify the file name because as you can see in the scheme file name the content type and the image base 64. so i'm going to say here inside the controller i'm going to first specify value to this file name and this is the type of string so i'm going to pass my file name here so i'm going to simply say request dot files as you know i have all my files inside this variable so instead of these files i can just say files so here i'm going to say files and in the square bracket i'm going to specify index so using this map function i'm going to iterate over each index and pass that index to these files just out of that i'm going to just get the original name of the file so here i'm going to say dot original name and i'm going to just store that name inside my database just out of that as you know we have the content type so here i'm going to say content type and to this content type i'm going to say files and in the square bracket i'm going to say index i'm going to access all the files using index and say mime types so what i'm going to do is i'm going to access the property of files in my email type and store that in this content type field just after that specify comma here and as you know we have the third field which is image base 64. i'm going to store value inside it and this is a type of string so in the controller here i'm going to say imagebase64 and as you know i'm gonna iterate over the images using this image array so in the source attribute i have all the images base64 format so here i'm going to say src that's it so once i have my object ready let me store this object in my mongodb database so down here i'm going to say let new upload and then i'm going to create a new object of model so here i'm going to say new upload model and i'm going to pass my final image object here this one i'm going to pass this object right here so once i have my new object my new model let me just call this save method to save this data in my mongodb database so down here i'm going to say return new upload and i'm going to just execute my chain methods so here i'm going to say dot save this method is going to save this data in the mongodb database just out of that i'm going to say here dot then i'm going to call the promises then method and as a response of this promise i'm going to return a message so in the curly braces i'm going to say msg and using this backtick operator here i'm going to say image uploaded successfully so when the image is successfully uploaded i'm going to have this message as a response if you want you can display the image as well instead of the static hard coded image so instead of this hard coded image here i'm going to call dollar curly braces and here i'm going to say files in the square bracket i'm going to say index as you know we are in this map method so i can access this index just after that just out of this index i'm gonna call original name so now when you upload your image you will get the image name with a successful message and then if there is any error inside your database i'm going to sketch that error using catch method so i'm going to secure catch error and call a callback function here and say if we have error here i want to catch two error at the same time if we have a duplicate image uploaded on the server i want to display a different message to the user and if there is any other error i want to display different message so how can i do it i'm going to do that using if statement so here i'm going to say if we have error let me just filter that error so here i'm going to say if error dot name is equal to error if the error is a type of error and the error code is equal to one one triple zero then i'm gonna execute this if statement now this code refers to the duplicate value in the mongodb database so if you try to upload a duplicate image in the mongodb database you will get this response so here in this if statement i'm going to just return response so here i'm gonna say return promise dot reject and then i'm gonna just return error with a message so i'm gonna just use backtick operator and say duplicate and then just call the file name so i'm going to copy this variable paste it here like this and then i'm going to say dot file already exist so if the file is already exist i'm gonna have this error message otherwise i'm gonna just return a promise with reject and in the object i'm gonna say error error dot message so i'm gonna display the error message and if this value is not available i'm going to pass the default value to this error message which is cannot upload and i'm going to pass this variable right here and say something missing if the message is not available i'm going to print this default value just sort of that as you can notice here this map is going to now return a promise as a response in the array format so we need to iterate over that array and also we need to iterate over that promises as well to get the result so as you can notice here i'm going to start this map right from here and in that map right here so let me just get that result in a variable so i'm going to create here a variable let result is equal to and inside this result i have the array of the type promises so if all promises are resolved i'm going to return the successful message otherwise return reject message so down here instead of this response.json right here i'm going to say promise dot all and in the parenthesis i'm going to pass a result variable so this will iterate over all my promises and get the response so down here i'm going to say then and if all the promises is resolved successfully i'm going to say here msg and pass here a callback function answer response dot redirect and i'm going to redirect the user to the root drought if you want you can print this mhg message this will print this image uploaded successfully message to the user but it will redirect you to the new route i don't want to do it i want to just redirect the user on the same route let me show you if i just get rid of this statement right from here and if i say here response dot json then you can notice when i print this msg i'm going to have this message let me show you but before i upload my image to the database let me just catch the error as well down here i'm going to say catch say here error call the callback function and say respawn.json and here i'm going to say error save this file back to the top and click on this collection when you click on the collection you don't have any data inside your collection as you can notice here you have uploader and this upload collection but you don't have any data inside it so let me store my images inside this uploads collection so what i'm going to do is i'm going to just back to my project reload it and i'm going to choose files so i'm going to click on this choose files and select all my four images and click on this open button and when i click on this upload images you can notice this will store all my images in my mongodb database and return a response you can notice here i'm gonna have an array of message image one uploaded successfully image two uploaded successfully and i have all my successful messages as a response so as you can notice the images is now successfully uploaded in my mongodb database let me show you let me open my collection and refresh it when i refresh my mongodb collection inside my mongodb collection i have all my data you can notice here the total document size is 4 the size of your collection is 4.23 mb because as i said earlier base64 store the actual data of your image if you just click on this next so this is your secondary cost when you click on this next you will get your third and fourth record now once you understand how to upload the image in the mongodb database let me just back to my project and instead of this response i'm going to just redirect the user to the road route instead of this response so i'm going to comment this save this file and now let me show you how to display all these images inside the bootstrap card now once you understand how to upload all your images in the mongodb database let me show you how to display all the images inside this bootstrap card so let me just back to my project and as you can notice here i have a response and i render the main file as a response i can pass a variable with this file if i just specify a second argument to this method if i say here comma and then specify in the object images and if i pass here value all images then i can access this variable inside my main file let me show you let me save the changes and back to the index file index.hps and right here down here i'm going to just print my all images variable right up here i'm going to create h three heading tag and then specify double curly braces like this and inside these curly braces i'm going to just pause this variable name images like this and now when i reload my browser i'm going to have this value all images so you can access your images values inside your template very easily with this second argument now instead of this hard coded value i'm going to get the data from my mongodb database and pass that to this variable so i can access all my images and display them one by one on my template so i'm gonna get rid of this all images and up here i'm gonna say constant all images is equal to and here i'm gonna call upload model and then i'm going to call a method dot fine this method is going to return all the data of mongodb database to this variable i want to make this statement asynchronous so i can pass here async and await function so here i'm going to say async and of it so this statement is now asynchronous so i'm going to just pass this all images to this variable so i can access it in my template so i'm going to save the changes back to the index.hps and let me get rid of this h3 handing tag and now i can access all my images as you know this find is going to return an array and inside that array we have all the images in the object so i'm going to just first iterate over a and iterate over that object so inside this column i'm going to just call these images so here i'm going to just call the each method of handlebar so in the double curly braces i'm going to say hash each to iterate or array i'm going to use each syntax of handlebar here i'm going to say each images i'm going to access this variable inside this index file so i'm gonna just use each and let me close this each so down here i'm gonna just call double curly braces forward slash h so this will just close this each statement and inside this each statement i'm going to add another each statement because as i said earlier i have these images inside an array and inside that array i have an object once i iterate over that array let me iterate over the object here i'm going to say double curly braces hash each this so i'm going to just iterate over the current object let me close this so i'm going to copy this h paste it right here and here i'm going to call double curly braces and say if image if image base64 is available then i'm going to execute this if statement so down here i'm going to say if and then close this if statement like this if in the object we have this property image base64 if we have this property let me just execute this if statement so inside this if i'm gonna call my bootstrap card so let me just create here a command and say bootstrap cards close this command down here to indicate this is the closing bootstrap card now just for that what i'm going to do is i'm going to grab this column and put that inside this statement because we have multiple images and once we have multiple images i can create multiple columns with that images so i'm going to just put this division tag inside this if statement i'm going to just say dot call three so i'm going to create a division tag with column three grab this card right from here cut this and paste it inside this column like this don't forget to align this code properly once we have this column inside this if statement let me get rid of this column from here don't forget to get rid of this div this closing div as well and now instead of this hard hard-coded source value i'm going to just pass my data so instead of this hardcoded source value and here i'm going to say single code and inside the single code i'm going to say data colon then i'm going to pass the header by syntax which is double curly braces with double closing curly braces and here i'm going to say content type so inside this variable i have the content type of my image and then i'm going to pass here colon and here i'm going to say base 64 comma then pass handlebar syntax like this and here i'm going to pass this property image base64 so i'm going to pass my data to this source attribute so whenever you want to access your base64 and display your image you need to first pass the data of that base64 and then pass the value of base64 let me just save the changes if you want you can store this data in the mongolia database as well but this application is only focused on uploading images in the mongodb database so i'm not going to change this text i'm going to leave everything as it is save the changes back to my project and reload it when i read my project you can notice here this will print all my images inside bootstrap card and now if you inspect this you can notice you have the data image jpg and you have the base64 format with the data so this is how you can store all the images and display all your images in node application so i hope you understand how to work with mongodb and store all your images inside the mongodb database and display them one by one in your application if you find anything useful don't forget to click on the like button share this video with your friends subscribe for more latest programming videos that is all for now i will see you with a new video with a new topic [Music] you

Channel: Daily Tuition

Views: 43,328

Keywords: nodejs, node, Multiple Image Uploader Using Node Express & MongoDB, multiple image uploader using node express and mongodb, node project, node express and mongodb project, complete backend tutorial, learn backend with node, node with backend api, learn node backend api, node application, node image uploader, image uploader, image, uploader, tutorial, complete tutorial, application, project, node image uploader with mongodb, mongodb database

Id: l8aGNhOD91k

Length: 80min 25sec (4825 seconds)

Published: Mon Dec 28 2020