File Upload with Multer in Node.js and Express

File upload is a common performance for any applications. In Node.js, with the Express spider web framework and the Multer library, calculation file upload feature to your app is very piece of cake. In this tutorial, we are going to learn how to upload files on the server with the help of Multer and Express in Node.js. The goal is to brand you lot comfortable in building apps that can easily handle any file uploads. At the finish of this weblog, you lot will be able to integrate the file uploads in your own apps.

We will be covering the following topics:

  • What is Multer?
  • Projection Setup
  • Install the dependencies
  • Testing Our API Using Postman
  • Adding Multer
  • DiskStorage
  • Other Options in Upload
  • Uploading Multiple Files

What is Multer?

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of the busyboy, for maximum efficiency. By this, you tin empathize that multer is used to handle multipart/form-data .

What is Multipart Data?
In general, when a "course" is submitted, browsers utilize "application-xx-www-form-urlencoded" content-type. This type contains only a list of keys and values and therefore are not capable of uploading files. Whereas, when yous configure your form to use "multipart/form-information" content-type, browsers will create a "multipart" message where each part will contain a field of the form. A multipart bulletin will consist of text input and file input. This way using multipart/class-data you can upload files.

Multer adds a body object and a file or files object to the request object. The body object contains the values of the text fields of the class, the file or files object contains the files uploaded via the grade.

Multer volition non procedure whatsoever grade which is non multipart (multipart/form-information).

Project Setup

Create a directory for the projection and requite information technology whatsoever proper noun. Nosotros will call it MulterApp.
Now, let'due south offset by outset defining the packet.json file to shop our app's configuration. To create one, navigate to the MulterApp directory in terminal, and write the following command:

              // In command prompt or last npm init

Reply a few questions (app name, git repo, etc…) and yous'll be ready to roll.

Install the dependencies

Here, the only 2 dependencies are express and multer . And then nosotros will install information technology one by ane via npm(Node Packet Managing director).

              // installing limited module  npm install express --save

We are now set up to write some lawmaking. Create a file with whatsoever name of your choice, we will call it app.js . Load the express module using crave() method and then prepare a basic limited server by writing the following code in app.js .

              // load express const limited = require('express'); const app = express(); app.get('/', (req, res) => {      res.send('howdy world'); }); app.mind(3000, () => {      console.log('Started on port 3000'); });

At present run the code by writing the following command in the last:

              node app.js

After this, open up the browser and type http://localhost:3000 .

You should see "Hello World" printing to the document window. We have prepare the basic server.

Testing Our API Using Postman

Postman is an essential and fantastic tool if you are building rest API. Nosotros will use Postman to test our routes. Every bit we are non using whatever course tag or frontend therefore we will make requests and specify our course information from Postman only. Then, make certain that you have Postman installed. Now let'south add together multer to our project.

Adding Multer

Before using multer, we have to install information technology using npm.

              // installing multer module   npm install multer --save

In this project, we will store the uploaded files in a folder for simplicity. Usually we store the files in the Amazon S3 bucket.

We will now load multer in the app.js file using the crave() method. The following lawmaking will go in the app.js file.

              const multer = crave('multer'); const upload = multer({dest:'uploads/'}).single("demo_image");

Here, nosotros have called the multer() method. It accepts an options object, with dest holding, which tells Multer where to upload the files. If you omit this object, the files will be kept in retentiveness and never written to disk.

In one case this is washed, We will now create our post route. We will make a POST request to the URL [ localhost:port/image ]. For that, we will starting time have to listen to that endpoint and we will do that by using the post() method.

Here we are making a post request because, in the actual scenario also, It volition be a post request only, equally the form tag will going to mail service this data to a specific URL(by specifying method="Mail service" and action="/paradigm" in form tag).

The following code volition go in app.js:

              app.post("/image", (req, res) => {    upload(req, res, (err) => {     if(err) {       res.condition(400).send("Something went wrong!");     }     res.send(req.file);   }); });


Multer supports uploading a single file as well as multiple files. In this case, we have used multer({..}).single() which is used for uploading a unmarried file. As I have mentioned before that the multer adds a file object to the request. The file object contains metadata related to the file.

Now nosotros will exist using Postman to test this endpoint.

Here note that the key name or the field proper noun that you are providing in form data should be the same as the one provided in the multer({..}).unmarried() (here name is demo_image).
At present come across your file structure once again, notice that uploads folder is created in the location provided in dest option(in our case in the project directory). If you want more controls over the uploads we volition use the storage option instead of dest .

DiskStorage

The deejay storage engine gives y'all full control over storing files to disk. We will create a storage object using the diskStorage () method.

The following code will go in app.js :

              var storage = multer.diskStorage({       destination: function(req, file, cb) {        cb(nil, './uploads');        },     filename: part (req, file, cb) {        cb(zilch , file.originalname);       } });

Hither, there are two properties, destination , and filename . They both are functions.

destination - It can also be given as a string (e.yard. './uploads'). If no destination is given, the operating system'south default directory for temporary files is used. It is mandatory to create a directory when you are using destination as a part. Otherwise, if you are using destination as a string, multer will make sure that the directory is created for you.

filename - Information technology is used to decide what the file should be named inside the folder. If you don't provide any filename, each file volition exist given a random name without any file extension. It is your responsibility to provide a function that should render a complete filename with a file extension. Both these functions take 3 arguments - the asking object, the file object and a callback role (here, cb is callback function). The 2 arguments to cb are:

  • zip - as we don't want to show any fault.
  • file.originalname - here, nosotros have used the same proper name of the file equally they were uploaded. Yous tin use whatever name of your option.

Now let's modify the variable a little bit.

              // In app.js  var upload = multer({ storage: storage }).single("demo_image");

Again examination this in Postman. Yous will find the same output but now check the epitome in the uploads folder. You volition find the same filename as you uploaded, with the proper extension.

Other Options in Upload

  1. limits - You can likewise put a limit on the size of the file that is beingness uploaded with the assistance of using limits.

The following code will go inside the multer() .

              // within multer({}), file upto merely 1MB can exist uploaded const upload = multer({        storage: storage,        limits : {fileSize : 1000000} });

Here, fileSize is in bytes. (1000000 bytes = 1MB)

2. fileFilter - Set this to a part to control which files should be uploaded and which should be skipped. The function should look like this:

              // this code goes inside the object passed to multer() part fileFilter (req, file, cb) {      // The function should phone call `cb` with a boolean      // to indicate if the file should be accepted       // To turn down this file pass `false`, like and then:       cb(null, faux);    // To accept the file laissez passer `true`, similar so:       cb(null, true);       // You can always pass an mistake if something goes wrong:       cb(new Error('I don\'t have a clue!'));  }

For Case, if nosotros only want the user to upload the image file (jpeg, jpg, png, gif).

Then the code will look like this and will go in app.js:

              // this code goes inside the object passed to multer() function fileFilter (req, file, cb) {       // Allowed ext    const filetypes = /jpeg|jpg|png|gif/;   // Check ext   const extname =  filetypes.test(path.extname(file.originalname).toLowerCase());  // Cheque mime  const mimetype = filetypes.examination(file.mimetype);   if(mimetype && extname){      return cb(null,truthful);  } else {      cb('Error: Images Just!');  } }

Uploading Multiple Files

Nosotros can upload multiple files every bit well. In this case, multer gives us another part called .arrays(fieldname[, max_count]) that accepts an array of files, all with the name fieldname . It generates an error if more than than max_count files are uploaded. The assortment of files will be stored in req.files.

The following code will go in app.js

              // uploading multiple images together app.post("/images", upload.array("demo_images", 4), (req, res) =>{   try {     res.ship(req.files);   } catch (error) {     console.log(error);     res.transport(400);   } });

Get to Postman, enter the specified URL, select multiple files so press Enter.

Closing Notes

At present, nosotros know how to integrate file uploads using multer in whatever application. Get ahead! brand your own application with complete frontend and integrate the file uploads by using the above-caused knowledge.

Keep Learning :)

Team AfterAcademy!!