Text File Uploads with Multer — The Complete Guide

Published in

SAFE Engineering

4 min readNov 11, 2020

Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files.
In this article, I will be covering how to read the contents of a text file with multer file upload.

The article is divided into three parts -

1. Setting up the Frontend (HTML)
2. Setting up the Backend (ExpressJS)
3. Reference links for image upload with Multer.

The following cases are being covered in this article -

Form accepting only a single file (.txt)
Form accepting only a single file (.txt) along with other input fields.
Form accepting multiple files (Different input fields)
Form accepting multiple files along with other input fields.

Basics of Multer -

Multer is a Node.js middleware. Middleware is a piece of software that connects different applications or software components. In Express, middleware processes and transforms incoming requests to the server. In our case, Multer acts as a helper when uploading files.

So let’s get started with the implementation!

Project Setup

1) Setting up the frontend -

Let’s create a basic HTML form that accepts a single text file upload with a Submit button.

HTML form with one input field of type file and a submit button.

IMPORTANT — Do not forget to put enctype=“multipart/form-data” in your form.

The /uploadFile is the backend route which we will write while setting up the backend.

Our index.html will look something like this on opening in the browser.

Our HTML form having a single button to select file.

2) Setting up the backend -

In your project directory, create a new file namedserver.js followed by an npm init

It’s finally time to install our dependencies — Express and of course Multer!
Install the dependencies using the following command:

                   npm i express multer --save

In our server.js we will now setup a basic server up on port 3000 with the following code—

Basic Express.js server setup on port 3000

Next, let’s configure the server for accepting files from the client.
We will import the multer library (line #2) and initialize its storage (line # 8 and line #9)

Imported multer and initialized its storage.

Now, we will be adding a route for file upload —

Note — This is the same /uploadFile route which we added to our HTML form while setting up the frontend

Adding the /uploadFile route to server.js

Line #23 in the above code is the line which reads the content from the text file and stores it in variable multerText

That’s it! You can use this variable which stores the actual contents of the text file and use it for further processing or store it in the database.

Next, let’s add validation for file MIME-type text- For this, we update the multer configuration with the following fileFilter code block that checks for a file’s MIME type (in our case — text)

const fileFilter = (req, file, cb) => {
    if (file.mimetype == 'text/*') {
        cb(null, true);
    } else {
        cb(null, false);
    }
}
const upload = multer({
    fileFilter,
    storage
});

This is how our final code including backend validation for text file looks like —

server.js including backend validation for text file type.

To run this — we simply do a node server.js in our project directory and our app will be live on http://localhost:3000

Demo accepting a file and displaying result on UI

Coming to the next part of our tutorial, we will now modify the form and the backend route to accept a single file (.txt) along with other input fields.

So we modify our HTML form and add an input field name with type text.

HTML Form with an input field of type text along with the input type file

Form with both input field and a file upload option.

The backend change will just involve adding the req.body parameter to the result (line # 39) in the below snippet.

server.js passing the input field text as well.

Coming to the next part of our tutorial, we will now modify the form and the backend route to accept multiple text files in different input fields. (Something like the below screenshot)

We will modify the HTML form to include two input fields with different names myFile1 and myFile2.

Single HTML form with two input type of file.

Now at the backend, instead of accepting a single file in upload.single, we change it to upload.fields (line #29) and pass in an array with the same name attributes used in our HTML form.

Modification of server.js to include multiple files.

The last and the final part of our tutorial — we will now modify the form and the backend route to accept multiple text files along with an input field as well.