File upload is a very common feature in dynamic websites. But it seems a very complex process to have an upload function on our website.
No worries!!!
We have Multer to give support to accomplish the task.
What is Multer
Multer is a node.js middleware for handling, multipart/form-data which is primarily used for uploading files.
This is what documentation says about Multer.
Yes, Multer is a middleware. We are going to use this middleware to upload the files inside our server.
Let’s start the game
mkdir multer-upload
cd .\multer-upload\.
npm init
Here we created a folder named multer-upload and inside the folder, we initiated an npm project.
npm install express multer –save
Create a server.js file inside the directory with the following code.
var express = require(“express”);
const app = express();
const port = 3000;app.get(‘/’, (req, res) => {
res.send(“Welcome People “);
});app.listen(port, () => {
console.log(‘Server is running on ‘ + port);
});
Run the server using
node server.js
Yes, We did it. Our server is successfully working now.
Basic needs for the server are done. The real game starts now.
First, we need to add the multer file to our server.js file.
var multer = require(‘multer’);
var upload = multer({dest:’uploads/’});
Here dest is the directory name where our files are going to be stored. According to the above code snippet, our files will be stored inside the uploads folder.
To test our upload feature we need an endpoint. Let’s make it ready
app.post(‘/upload’, upload.single(‘file’), (req, res) => {
try {
res.send(req.file);
}catch(err) {
res.send(400);
}
});
Now we can use the endpoint to upload files. We can use postman to test the upload feature.
Yeah! we can see our file is uploaded to our server.
Our uploaded file is missing an extension. Don’t worry still multer is here for us.
We can use storage instead of dest to control the file extension. Multer sends with storage engines DiskStorage and MemoryStorage.
We are going to use a disk storage engine which gives some extra control of storing files on a disk. First, we are going to create an object of storage.
var storage = multer.diskStorage({destination: function(req, file, cb) {
cb(null, ‘./uploads’);
},
filename: function (req, file, cb) {
cb(null , file.originalname);
}
});
modify the upload variable to
var upload = multer({ storage: storage });
We can see there are two options mentioned inside the storage.
Destination: this is the directory inside your server folder where your images will be stored.
Filename: This is the filename how your file should be named in the directory. if you failed to provide a filename to your file, multer will save the file without the extension.
If we wish to save the file, same as they were uploaded, we can use file.originalname.
Similarly, we can store more than one file also. Nothing big to do about that. change upload.single to upload.array.
app.post(‘/uploadfiles’, upload.array(‘files’,3), (req, res) => {
try {
res.send(req.file);
}catch(err) {
res.send(400);
}
});
By accessing the new endpoint /uploadfiles, you can upload more than one file to our server.
Finally, we did it…
You can go through the documentation of multer here.
Happy Coding 😃😃😃
About the Author
