File Upload Using Multer in Node.js and Express.js [2021 Tutorial]

File Upload Using Multer in Node.js and Express.js [2021 Tutorial] www.bacancytechnology.com

File upload is the most basic operation for any application. Combining Node.js with Express and the Multer library, we can smoothly implement the file uploading feature. Let’s begin our tutorial and learn about file upload using Multer in NodeJS and Express.js For simplicity purpose, I have divided the guide into these topics-

Table of Contents 1. What is Multer?

2. Steps – File Upload Using Multer in Node.js and Express Initial Setup Install Dependencies Adding Multer Multer Storage for Single Image Upload Upload Multiple Images using Multer Upload Video Files using Multer 3. Conclusion

What is Multer?

According to the documentationMulter is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of the busboy for maximum efficiency.

Click here to explore more regarding the implementation of Multer.

Steps File Upload Using Multer in Node.js and Express

Follow the step-by-step guide to learn about how to upload files in Exress.js and Node.js using Multer.

Initial Setup Create a directory mkdir MulterApp cd MulterApp

Define package.json file For creating one, run this command: npm init

Install dependencies We only have two dependencies to be installed- Express and Multer. So here are the commands To install Expressnpm install express --save

To install Multernpm install --save multer

Now, it’s time to code.

First of all, create a file and name it anything; here it is app.js. I’ll be coding the entire code in app.js to keep it simple for you. Further, loading the express module with the help of require() and then, at last, writing the belowmentioned code for setting up the basic express server

//app.js const express = require('express'); const path = require('path'); const app = express() const port = process.env.PORT || 3000 app.get(‘/’, (req, res) => { res.send(‘Hello People’); }); app.listen(port, () => { console.log('Server is up on port ' + port); })

Run this command to verifynode app.js

Hit http://localhost:3000, and you should see “Hello People” in your window.

Adding Multer For simplicity purpose, I’ll store all the uploaded files in the local folder.

Write the below-mentioned code for loading multer in our app.js file

const multer = require(‘multer’);

Multer fi Storage for Single Image Upload Now, the next thing to be implemented is to define a storage location for all the files.

Multer made it easy by providing an option to store our files to disk.

We will set up a directory to save all the files and provide them a new identifier.

Create a folder- images, in the root directory.

// Image Upload

const imageStorage = multer.diskStorage({ // Destination to store image destination: 'images', filename: (req, file, cb) => { cb(null, file.fieldname + '_' + Date.now() + path.extname(file.originalname)) // file.fieldname is name of the field (image) // path.extname get the uploaded file extension } });

Destination – Destination is used so that the application can know where to store images. It can be a string (e.g. ‘./upload’).

The default directory for all the temporary files is used in case the destination is not provided. Creating a directory is compulsory when you use the destination as a function. Or else, if you use destination as string, Multer will create directory.

Filename – Filename determines what a file should be named in the folder.

A random file name with no extension will be given if you don’t provide the file’s name. The function takes three parameters – the request object, the file object, and a callback function.

The two arguments to the callback are: null – as we aren’t showing an error.

file.originalname – in this demo, I have used the same file name as they are uploaded.

You can choose any name.

We have used the multer() method in the below-mentioned snippetconst imageUpload = multer({ storage: imageStorage, limits: { fileSize: 1000000 // 1000000 Bytes = 1 MB }, fileFilter(req, file, cb) { if (!file.originalname.match(/\. (png|jpg)$/)) { // upload only png and jpg format return cb(new Error('Please upload a Image')) } cb(undefined, true) } })

The multer() method takes an object with storage property, The limits property describes the maximum size of the file.

The fileFilter() method is for security reasons. I have validated files before it is uploaded to the servers. Here, it will accept only two extensions – .png and .jpg.

After this, it’s time to create the post route.

We will make a POST request to localhost:3000/uploadImage.

Add the following code in the app.js-

// For Single image upload router.post('/uploadImage', imageUpload.single('image'), (req, res) => { res.send(req.file) }, (error, req, res, next) => { res.status(400).send({ error: error.message }) }) I have used imageUpload.single(‘image’) for uploading a single file. As mentioned earlier, the multer adds a file object to the request.

The file object has metadata of the file.

Here inside the single() method, we have passed the field name. The same field name we will pass in Postman.

To test the endpoint, open Postman.

watch video Keep key name or the field name same as those given in the imageUpload.single() Check the image in the Images folder.

Upload Multiple Images using Multer Now we will upload multiple files using Multer. For that, multer provides another function named arrays(fieldname[, max_count]) that takes an array of files, all with the name fieldname. It will generate an error in case you upload more than max_count files. The array of files will be saved in req.files.

Here no need to create any storage. We will use the same storage as before. // For multiple image upload router.post('/uploadBulkImage', imageUpload.array('images', 4), (req, res) => { res.send(req.files) }, (error, req, res, next) => { res.status(400).send({ error: error.message }) }) Open Postman, enter the URL, select multiple files and click Send.

watch video Verify the image in the Images folder.

Upload Video Files using Multer Let’s further learn about video file upload using multer in Node.js and Express As discussed above, we have to create diskStorage to upload the video. And for that, use the below-mentioned snippet-

// Video Upload

const videoStorage = multer.diskStorage({ destination: 'videos', // Destination to store video filename: (req, file, cb) => { cb(null, file.fieldname + '_' + Date.now() + path.extname(file.originalname)) } });

Use multer() method to upload video the way we did for images.

const videoUpload = multer({ storage: videoStorage, limits: { fileSize: 10000000 // 10000000 Bytes = 10 MB }, fileFilter(req, file, cb) { // upload only mp4 and mkv format if (!file.originalname.match(/\. (mp4|MPEG-4|mkv)$/)) { return cb(new Error('Please upload a video')) } cb(undefined, true) } }) After this, create a POST request to upload the video.

router.post('/uploadVideo', videoUpload.single('video'), (req, res) => { res.send(req.file) }, (error, req, res, next) => { res.status(400).send({ error: error.message }) }) Test the API in Postman as explained above.

watch video

Check the video in the videos folder.

You can find the source code here – Github Repository

Conclusion

I hope you found this tutorial helpful and have learned about file upload using Multer in NodeJs and Express.js. File upload can be an exciting feature, but its implementation doesn’t have to be difficult always. We can handle multipart/form-data at our ease, using Multer and Express.js. If you are looking for assistance for file upload with Multer in Node.js and Express.js, then you have landed on the right page.

At Bacancy Technology, we hold a pool of skilled Node.js developers whose expertise can be leveraged for handling multipart and formdata. Hire Nodejs developer from us to integrate file uploads using Multer in any application. Build your next-gen application with your choice of frontend and integrate the file uploads based on the knowledge acquired from tutorial.

Keep Learning and Coding!

Thank you

www.bacancytechnology.com