How to upload a file using TypeScript with Node and Express

In this article, I will demonstrate how you can upload a file using multer middleware with content type multipart/form-data. The form-data is oldest and most widely used to submit data to server. 

Express and the body-parser can not parse multipart/form-data. The POST request will invoke the appropriate route, but req.body will be undefined. Only Multer can help to save the file in appropriate location.

---

Before jumping into the coding part, if you want to set up your middleware code / REST API code use Typescript with Node, please follow the below mentioned article.

• Create production ready REST API using nodeJS with TypeScript

And if you want to setup same functionality with serverless feature, please follow the below mentioned article.

• Create serverless REST API using AWS Lambda API Gateway RDS postgres with Nodejs and Typescript

---

How shall I am going to demonstrate 

I am going to make two different article to demonstrate the file upload functionality with express and serverless backend. This blog is with express as you can see in the blog title, but the another article I will explain how to do the same with serverless way.

• Article 1: How to upload a file using TypeScript with Node and Express
• Article 2: How to Build a serverless backend AWS Lambda function to upload a file using TypeScript with Node

---

Let's Begin...

I hope you have your initial code, if not you can checkout the code from here. On top you need to have below npm library to upload the file in either specific location or AWS S3 bucket.

• npm install multer @types/multer --save
• npm install multer-s3 @types/multer-s3 --save
• npm install aws-sdk --save

 

Once the packages are installed, you need to configure follwing 

1. routes
2. upload handler
3. file provider (where I am validating the request and handling the error)

---

Configure routes

In routes you need to mention the path of the publicly accessible endpoint and the http method name with upload handler. Upload handler will call the respective provider to handle the multipart/form-data content type. Let's see how the router file looks like 

Then you need to create handler of upload functionality, here we are going to use multer to handle multipart/form-data. Using multer or multer-s3 we can upload file to a particular directory or we can upload file to AWS S3 bucket as well. For uploading file to S3 bucket you do need to make the bucket as public in order to access files from outside or you can configure proper VPC and CORS policy to access from specific network.

---

Handler to upload file in AWS S3 bucket 

As I mentioned above, to access AWS S3 from your node TypeScript code you do need to install aws-cli and I believe you have already done it. Once you install the stuff you will see few AWS credentials like 

• SECRET_ACCESS_KEY

• ACCESS_KEY_ID

• REGION

Please copy all the values and put it in your .env file. We are going to read those values in order to access S3 bucket. 

Also we need to configure multer-s3. Multer will accept everything, including single or multiple file uploads. Actually there’s a whole bunch of these methods, and the difference is the number of files they handle. In this tutorial I am going to handle .single method to upload a single file.

• multer.none() no files (0)
• multer.single() one file (1)
• multer.array() at least one file (1+)
• multer.any() any number of files (0+)
• multer.fields() at least one file (1+)

Let's see how the handler file looks like 

Now you are ready to execute the code, check the S3 bucket you will definitely get the uploaded file. You can get the complete code from here.

In next blog I will going to make the same implementation with serverless backend. Stay tuned!

Happy Coding!

- LP