{"componentChunkName":"component---src-templates-tag-js","path":"/tags/multer/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/upload-files-with-node-and-multer/"},"html":"

Introduction

\n

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.

\n

First steps

\n

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

\n

Adding Express

\n

In your terminal, type the following command:

\n
yarn add express
\n

* You can also use NPM for installation

\n

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

\n
const express = require("express")\nconst app = express()\n\napp.listen(3000 || process.env.PORT, () => {\n  console.log("Server on...")\n})
\n

Adding Multer

\n

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

\n
yarn add multer
\n

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

\n
const multer = require("multer")
\n

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

\n

Configuring and validating the upload

\n

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.

\n
const storage = multer.diskStorage({\n  destination: (req, file, cb) => {\n    cb(null, "uploads/")\n  },\n  filename: (req, file, cb) => {\n    cb(null, Date.now() + "-" + file.originalname)\n  },\n})
\n

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

\n

Providing an upload route

\n
const uploadStorage = multer({ storage: storage })\n\n// Single file\napp.post("/upload/single", uploadStorage.single("file"), (req, res) => {\n  console.log(req.file)\n  return res.send("Single file")\n})\n\n//Multiple files\napp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {\n  console.log(req.files)\n  return res.send("Multiple files")\n})
\n

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.

\n

The end

\n

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

\n
const express = require("express")\nconst multer = require("multer")\n\nconst app = express()\n\nconst storage = multer.diskStorage({\n  destination: (req, file, cb) => {\n    cb(null, "uploads/")\n  },\n  filename: (req, file, cb) => {\n    cb(null, Date.now() + "-" + file.originalname)\n  },\n})\n\nconst uploadStorage = multer({ storage: storage })\n\n// Single file\napp.post("/upload/single", uploadStorage.single("file"), (req, res) => {\n  console.log(req.file)\n  return res.send("Single file")\n})\n//Multiple files\napp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => {\n  console.log(req.files)\n  return res.send("Multiple files")\n})\n\napp.listen(3000 || process.env.PORT, () => {\n  console.log("Server on...")\n})
\n

Now it's up to you!

\n","frontmatter":{"date":"October 12, 2020","updated_date":null,"title":"Upload files using NodeJS + Multer","tags":["NodeJs","Express","Multer"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/49a3115a8c11e7fd9aca612e846c5936/ee604/node-multer-upload.png","srcSet":"/static/49a3115a8c11e7fd9aca612e846c5936/69585/node-multer-upload.png 200w,\n/static/49a3115a8c11e7fd9aca612e846c5936/497c6/node-multer-upload.png 400w,\n/static/49a3115a8c11e7fd9aca612e846c5936/ee604/node-multer-upload.png 800w,\n/static/49a3115a8c11e7fd9aca612e846c5936/f3583/node-multer-upload.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Gabriel Rabelo","github":"gabrielrab","avatar":null}}}}]}},"pageContext":{"tag":"Multer"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}