How to Upload Multiple Files in Multiple Form Fields in Node.js and Express Using Multer Library

uh hello friends today in this tutorial i will be showing you that how to upload multiple image files or video files or any sort of files inside malta library using node.js and express so you can see that this is a different scenario we have different we have multiple input fields here you can see this is the first input field and this is the second input field we will be taking inputs from different input fields here let me just choose file here and if i choose this file and the second input field file here let me choose this image file and there is a button simple button which will upload these image files to our folder which is there inside our express server you can see this is a public folder and inside this we have the uploads folder so now if i hit this button you will see in the background it will upload this and now you will see this object this contains two files file one file two and the files are successfully uploaded if i show you this is the image files that we have uploaded here you can see this is the first image file and this is a second image file so in this way we can just upload multiple files from multiple input fields inside malta library so many people ask this question that how maltese supports uploading files from different input fields so we will be looking at a detailed example in this video so for the source code just go to the video description i have given the full link of the source code this is my step-by-step blog here you can just follow along with this video just go to the video description and you will find the link and here i have given all the source code and now to get started we need to delete all these files and let me just start from scratch let me just delete this also delete this folder so now first of all you need to be having nodejs installed on your computer before starting it let me also delete all the code and after you install nodejs you need to go to a folder where you need to create a project just let me just tell you the commands that you will be requiring first of all you need to execute npm init dash y so this will create the empty package.json file for you now you need to install these dependencies which is express which will be the main server on which the application will run secondly we need to install ejs ejs is a template engine which express uses in order to render out html documents then we need to install malter which is the file uploading library which is used to upload files and lastly we need to install node mod which will automatically restart the application for us whenever we make any sort of changes so just install these four dependencies and i will just execute npm start basically this will start the node one for me you can see and now go to package.json add the start script here you can see just add start and the value will be nodemon index.js so right here create a index.js file and right here we will import some dependencies that we have imported first of all we will import express and then we will create a app folder and store the express in instance and now we need to make a port variable so basically this will be the port number the default will be process dot env port if the port number is not available just use the the static value which is 500 now we need to listen to this port number app.listen and here we need to pass the port number so the second argument it takes is the callback function so here we can just say console log app is listening on port this port number so you can see you can just paste the port number like this that's it now we simply need to set the view engine which is ejs so we will say app.set view engine and the second value will be ejs ejs will be defaults view engine that we need to set and also we need to include the malta library so also require the smalter library requirement and also we will be needing path library so this is a built-in library you need not have to install it but that's it and now we need to load a template whenever we open the home page so app.get this is the home page request response and here we need to load the ejs template by the help of response.render like this and here we will say in index so index we need to create a separate folder for storing all the templates which is views folder you just need to create this and inside this just create index.ejs so right here this will be a simple bootstrap template we have included the cdn or bootstrap and jquery and right here we will include the container class of bootstrap text center and this will be multiple form field upload in walter just say like this and after this we will have a simple form the action will go to slash upload file and the method will be post and for uploading files we need this additional encoding type which will be equal to multipart slash form data now we will have the form group class of bootstrap inside this we will have the label for file one so here we will say simply upload file one colon and next we will have the simple input field input type file and then we will have form control class which is a bootstrap class so the name we will attach is file1 this is this name attribute is very much important you need to give a unique name at parameter and then we need to say required this is for the validation so this field is required next we will have another form group same we will have the label this time file to so here we will say upload file to and then we will again have input type of file and this will be file control class and name parameter we will change to file two and also this is required so just changes to required so after this we need a simple button so we need to surround this again by this form group class so inside this we will have the button which have these classes button button danger and button block and here we say upload files that's it so this is our html file that we need to write this is a index.ejs template so now when we launch the application it will restart it you will see app is listening on port 5000. if i open this localhost 5000 you will see my template is ready choose file choose file and now if i try to submit it you will see please select a file this is the validation form which is happening now we simply need to create this post request which is upload file go back to index.js and right here we need to create app.post post request so slash upload file and here we need to just configure the malter middleware function which will handle the file upload task for us so for doing this we need to you just need to go to my blog i will just explain you i will not write it this is just three four lines of code so if i just show you this is the let me just copy it and here i will paste it so we have declared a storage variable and we are using the methodology that malta uses in order to store the files inside the disk so this is a dist storage function it takes two parameters first is the destination wherever you need to store your file i will change this path to public slash uploads this is the directory wherever we are storing the files and then is the file name which will automatically get triggered once once the file is uploaded so this is a random name that we are giving we are using the date dot now function and then we are extracting the path we are extracting the extension from the path by using path dot extension name and then we are providing the original name of the file that's it now we are attaching we are calling the monitor constructor and passing the storage option that we have configured now let me just format this code and lastly guys we also need to make sure that we provide the multiple fields because we have multiple fields out there first field second field now to distinguish distinguish it we will be using this fields parameter you can see let me just paste it you will see let me just change this to multiple upload and this is upload dot fields so basically fields is a method which is there which takes a array of options array of fields so first field here we need to provide the name attribute whatever name attribute that we have given which is file one in my case if you you can cross check i have given file one name parameter so same parameter you need to assign here and then the second option is maximum count so basically this means that how many files that you want to upload per page so here i will just change i will not provide anything here and for the second field this will be a multiple field so here you can just upload multiple files so first of all i will change this name parameter to file two and then we can only upload the three images at one time so for this we need to change this to multiple field so here we provide a parameter multiple sorry multiple so here we will attach this option which allows the user to upload multiple files we can only upload three files you can see we have provided this option math max count so now we need just need to pass this middleware function here multiple upload when whenever we make this post request so this middleware function will first execute then it will come to this part so here guys this is pretty simple we just need to check in the if condition if request dot files this will be your object here so if it is not empty then the files are successfully uploaded we will just say console files uploaded and then we also need to console log this array oh sorry object which is request.files so this will contain all the files which are uploaded so now you can just execute this application you can see app is listening on port 5000 if i make sure if i restart the application if i choose file so here you can see i i am uploading only one file because this is a single input file so here we can upload multiple files only three files we can upload at one time you will see three files i have selected if i click upload files so it is saying to us that uh no such file or directory open let me just see so just wait guys we are checking here i have given file two let me just see guys what is the problem here uh the error was coming guys so just make sure that you go to my blog here just copy paste this code here you can see the correct code is there inside my blog so i will simply paste this code here like this so this is a correct code you can see we just need to provide this max count value here so after you refresh it now this will work let me just select a file let me select this file and let me just first of all select a single file and if i click it is saying to us cannot post upload file so i think we have provided a wrong address oh sorry we haven't created this post request so that is why it is so app.post upload file request response and if request.files then say console.log request files and then we can say files uploaded so here we need to pass this function which is upload multiple this is a middleware function so we just need to pass here if i again refresh it so again if i select this image file let me select this image file if i upload files so [Music] so now the error is coming guys because i figured out because we haven't created the directory so we need to create a directory wherever we will store the files you will see we need to create this public directory inside this inside this public directory we need to create another directory which is uploads so wherever we will store the files so that is why the error was coming because we haven't created the folders so we are passing this folder structure you can see public slash uploads so first of all we need to create these folders before we running this script so now after you create it you can now run this so it will hopefully work you will see in second this is a multiple field so we can select multiple files and if i upload here you will see now it has successfully uploaded these three files you can see the first input field file contains only one file you can see this is screenshot4.png and this has destination file name and this is a full path and the file to file to input field contains two files you can see which we have uploaded file to this is these are the information and now if i cross check you will see these three files are uploaded image files i can even open these files so in this easy way you can just upload image files from different input fields inside malta using node.json express all the source code regarding this will be given in the video description and also make sure that that you check out my website which is freemediatools.com here i add tools related to media audio video and image so this is my own website i have total 130 tools available on this website and i daily add tools so make sure that you check out this website please share it with your friends and i will be seeing you in the next video until then thank you very much

Channel: Coding Shiksha

Views: 36,239

Keywords: coding shiksha, multer, node multer upload multiple files, multer node js file upload using postman, multer node js file upload in hindi, multer upload.fields, upload multiple files multer, multer fields multiple, how to upload file in multer

Id: hXf8Rg-sdpA

Length: 16min 39sec (999 seconds)

Published: Mon Jan 04 2021