Upload files using NodeJS + Multer

Introduction

When building APIs, the need to upload files is expected, which can be images, text documents, scripts, pdfs, among others. In the development of this functionality, some problems can be found, such as the number of files, valid file types, sizes of these files, and several others. And to save us from these problems we have the Multer library. Multer is a node.js middleware for handling multipart/form-data that is used to send files in forms.

First steps

The first step is to create a NodeJS project on your computer.

Adding Express

In your terminal, type the following command:

1yarn add express

* You can also use NPM for installation

Create a file named app.js inside the src/ folder. The next step is to start our Express server in our app.js

1const express = require("express")
2const app = express()
3app.listen(3000 || process.env.PORT, () => {
4console.log("Server on...")
5})

Adding Multer

With the project created, configured and with Express installed, we will add the multer to our project.

1yarn add multer

The next step is to import the multer into our app.js file.

1const multer = require("multer")

We are almost there. Now create a folder called uploads where we will store the uploaded files.

Configuring and validating the upload

Now we are at a very important stage which is the configuration of diskStorage. DiskStorage is a method made available by multer where we configure the destination of the file, the name of the file and we can also add validations regarding the type of the file. These settings are according to the needs of your project. Below I will leave an elementary example of the configuration.

1const storage = multer.diskStorage({
2  destination: (req, file, cb) => {
3    cb(null, "uploads/")
4  },
5  filename: (req, file, cb) => {
6    cb(null, Date.now() + "-" + file.originalname)
7  },
8})

In the configuration above, we mentioned the destination for the uploaded files and also change the name of the file .

Providing an upload route

1const uploadStorage = multer({ storage: storage })
2// Single file
3app.post("/upload/single", uploadStorage.single("file"), (req, res) => {
4console.log(req.file)
5return res.send("Single file")
6})
7//Multiple files
8app.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {
9console.log(req.files)
10return res.send("Multiple files")
11})

In the code snippet above, we created 2 POST routes for sending files. The first /upload/single route receives only a single file, note that the uploadStorage variable receives our diskStorage settings. As a middleware in the route, it calls the single method for uploading a single file. The /upload/multiple route receives several files, but with a maximum limit of 10 files, note that the uploadStorage variable now calls the ʻarray` method for uploading multiple files.

The end

With all the settings done, our little API is already able to store the files sent.

1const express = require("express")
2const multer = require("multer")
3const app = express()
4const storage = multer.diskStorage({
5destination: (req, file, cb) => {
6cb(null, "uploads/")
7},
8filename: (req, file, cb) => {
9cb(null, Date.now() + "-" + file.originalname)
10},
11})
12const uploadStorage = multer({ storage: storage })
13// Single file
14app.post("/upload/single", uploadStorage.single("file"), (req, res) => {
15console.log(req.file)
16return res.send("Single file")
17})
18//Multiple files
19app.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {
20console.log(req.files)
21return res.send("Multiple files")
22})
23app.listen(3000 || process.env.PORT, () => {
24console.log("Server on...")
25})

Now it's up to you!