Multer Multiple File Uploads in One Form

Welcome folks today in this blog mail service nosotros will be looking on how to upload multiple files present in multiple class fields in node.js and express using the multer library. All the source code of the case volition be shown beneath.

Become Started

In society to become started you need to install node.js on your computer and and then execute the below commands to become started with the node.js and express project

npm init -y

npm i express

npm i ejs

npm i multer

npm i nodemon

Limited will be the main node.js server which volition be running the main application

ejs It is the template engine which express uses to render out html documents in limited

multer It is the actual file upload library which is used to upload files

nodemon It is a special dependency which automatically restarts the application for you when you make any changes to it.

Now afterwards installing all these dependencies a package.json file will be created in the root binder. At present you merely need to make a alphabetize.js file in the root binder which will exist the starting indicate of the application

index.js

1 2 3 4 5 6 7 8 ix 10 11 12 13 fourteen xv 16 17

const express = require ( 'express' ) const app = limited ( ) const PORT = process . env . PORT || 5000 app . set ( "view engine" , "ejs" ) app . get ( '/' , ( req , res ) = > { res . render ( "index" ) } ) app . heed ( PORT , ( ) = > { console . log ( ` App is listening on Port $ { PORT } ` ) } )

At present hither in this block of code we are loading the required dependencies which are express and ejs template engine and we are starting the awarding at port 5000

At present we are loading a template alphabetize.ejs so for that you need to create this template in the views binder.

Now create a views folder in the root folder like this views/alphabetize.ejs and create a file called as index.ejs

index.ejs

ane 2 3 iv v 6 7 8 nine 10 eleven 12 xiii 14 15 sixteen 17 18 xix xx 21 22 23 24 25 26 27 28 29 30 31

< ! DOCTYPE html > < html > < head > < championship > Currency Converter in Javascript < / title > < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.three.1/css/bootstrap.min.css" / > < / head > < body > < div class = "container" > < h1 class = "text-eye" > Multer Multiple Field File Upload Case < / h1 > < form action = "/uploadfile" id = "mail" method = "postal service" enctype = "multipart/grade-data" > < div form = "form-group" > < characterization for = "file1" > Upload File 1 : < / label > < input type = "file" proper noun = "file1" id = "" required form = "grade-control" > < / div > < div class = "class-grouping" > < label for = "file2" > Upload File 2 : < / characterization > < input type = "file" name = "file2" id = "" required class = "form-control" > < / div > < div form = "form-group" > < button class = "btn btn-danger btn-block" > Upload Files < / button > < / div > < / form > < / div > < / body > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/iii.four.ane/jquery.min.js" > </script> < / html >

At present when you launch your node.js app by running

node index.js

y'all will see this screenshot

Now you can meet hither nosotros have multiple file input fields nosotros need to accept the input from the user and upload these files to the express server. For storing information technology we need some folders that we need to create right now.

At present get to the root folder create a public/uploads directories or folder and here we volition be storing files which will be uploaded.

Storing Files in Multer

At present we will write some server side code to actually store the files which are coming from the client side. Then multer supports different options to store the files we will actually use the simplest one

which is deejay storage approach

var storage = multer . diskStorage ( { destination : function ( req , file , cb ) { cb ( zippo , '/tmp/my-uploads' ) } , filename : function ( req , file , cb ) { cb ( nil , file . fieldname + '-' + Date . now ( ) + path . extname ( file . originalname ) ) } } ) var upload = multer ( { storage : storage } )

Hither in this snippet of code multer is taking use of diskStorage Method inside which we are passing two arguments start argument is destination. Destination is actually where yous demand to store the file. So here we are providing the actual path y'all tin come across cb function 2nd argument is the path. Hither you will write public/uploads and and so we have the 2nd statement which is the actual filename which volition be given to the uploaded file by multer. Then hither you can attach a random name or whatsoever sort of name that y'all want. Here we are providing a random name with the help of Date function.

And lastly yous can see nosotros are calling the multer constructor function passing the option which is storage to the actual storage object which we have defined before on.

So now we need to add some lawmaking to our index.js file and update the lawmaking like this

1 2 3 four 5 6 7 8 ix 10 xi 12 13 14 15 sixteen 17 18 nineteen twenty 21 22 23 24 25 26 27 28 29 xxx

const express = crave ( "express" ) ; const app = express ( ) ; const multer = require ( "multer" ) ; const PORT = process . env . PORT || 5000 ; const path = require ( 'path' ) app . set ( "view engine" , "ejs" ) ; var storage = multer . diskStorage ( { destination : function ( req , file , cb ) { cb ( null , "public/uploads" ) ; } , filename : function ( req , file , cb ) { cb ( null , file . fieldname + "-" + Date . now ( ) + path . extname ( file . originalname ) ) ; } , } ) ; var upload = multer ( { storage : storage } ) ; app . get ( "/" , ( req , res ) = > { res . render ( "index" ) ; } ) ; app . listen ( PORT , ( ) = > { panel . log ( ` App is listening on Port $ { PORT } ` ) ; } ) ;

So at present we demand to distinguish which class field we are processing in multer so for doing this we have a special fields role in multer.

var cpUpload = upload . fields ( [ { name : 'avatar' , maxCount : 1 } , { proper name : 'gallery' , maxCount : eight } ] )

Y'all can see in this block of code we are attaching multiple file input fields inside multer upload function passing array of objects. The offset object is equal to the first input field values which include the name of the input field and the maximum no of files allowed to upload.

So in this manner nosotros need to replace the name parameter to the actual names that we accept given in the index.ejs

Going back to index.js file make this modifications and copy paste the lawmaking

1 2 3 4 v vi seven 8 9 ten 11 12 13 xiv 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

const express = crave ( "express" ) ; const app = limited ( ) ; const multer = crave ( "multer" ) ; const path = require ( "path" ) const PORT = process . env . PORT || 5000 ; app . set ( "view engine" , "ejs" ) ; var storage = multer . diskStorage ( { destination : part ( req , file , cb ) { cb ( cipher , "public/uploads" ) ; } , filename : function ( req , file , cb ) { cb ( null , file . fieldname + "-" + Engagement . now ( ) + path . extname ( file . originalname ) ) ; } , } ) ; var upload = multer ( { storage : storage } ) ; var uploadMultiple = upload . fields ( [ { name : 'file1' , maxCount : x } , { name : 'file2' , maxCount : ten } ] ) app . become ( "/" , ( req , res ) = > { res . render ( "index" ) ; } ) ; app . mind ( PORT , ( ) = > { console . log ( ` App is listening on Port $ { PORT } ` ) ; } ) ;

You need to replace it with your proper name parameters as shown below.

So now after replacing it we need to modify the alphabetize.js file and re-create paste the below code

1 2 3 4 5 6 seven 8 9 10 11 12 13 fourteen 15 xvi 17 18 19 twenty 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

const express = require ( "express" ) ; const app = express ( ) ; const multer = crave ( "multer" ) ; const path = crave ( 'path' ) const PORT = process . env . PORT || 5000 ; app . gear up ( "view engine" , "ejs" ) ; var storage = multer . diskStorage ( { destination : role ( req , file , cb ) { cb ( null , "public/uploads" ) ; } , filename : office ( req , file , cb ) { cb ( null , file . fieldname + "-" + Engagement . at present ( ) + path . extname ( file . originalname ) ) ; } , } ) ; var upload = multer ( { storage : storage } ) ; var uploadMultiple = upload . fields ( [ { name : 'file1' , maxCount : x } , { name : 'file2' , maxCount : 10 } ] ) app . get ( "/" , ( req , res ) = > { res . render ( "alphabetize" ) ; } ) ; app . post ( '/uploadfile' , uploadMultiple , function ( req , res , next ) { if ( req . files ) { console . log ( req . files ) panel . log ( "files uploaded" ) } } ) app . mind ( PORT , ( ) = > { console . log ( ` App is listening on Port $ { PORT } ` ) ; } ) ;

And then now as you tin see inside this we are making a mail service request to the /uploadfile route and passing the middleware function which we have created uploadMultiple we are passing it in the route also. Later uploading the files it will return true and prints it in the console that files uploaded. Every bit you tin can run across in the beneath figure.

hartsocktrainsomill1963.blogspot.com

Source: https://codingshiksha.com/javascript/how-to-upload-multiple-files-in-multiple-form-fields-in-node-js-and-express-using-multer-library-full-example-for-beginners/

Share this post