File uploading example using NestJS and Angular 11

File uploading example using NestJS and Angular 11 — Part 1

Ravi Yasas

5 min read·Aug 21, 2021

The NestJS framework is becoming very popular in the industry because it provides many features for JavaScript-based micro-services. NestJS framework is very similar to Spring Boot. If you are familiar with Spring Boot, it will be very easy to go through with NestJS. You can find everything about NestJS from NestJS documentation.

Here I am going to explain a CSV file upload service using NestJS as the back-end and Angular 11 as the front-end. I hope to add more features to this application in future posts.

Why NestJS?An open-source framework to create efficient and scalable server-side applications with NodeJS.Fully supported for TypeScript and based on ExpressJS.The important thing about NestJS is, it provides the application architecture to create highly available, scalable, maintainable, testable, and loosely coupled server-side applications.The application overviewCreate a REST API using NestJSUse TypeORM to save CSV file data into the databaseCreate a client application using Angular 11Used technologiesNestJSAngular 11TypeORMPostgres DBPrerequisites

Here I mention the versions that I am using. Sometimes the versions can differ from what you are using.

Install NodeJS v14.16.1 with NPM version 7.18.1Install NestJS CLI 7.6.0Install Angular CLI 11.2.12Basic knowledge of NodeJS and TypeScriptCreate a new NestJS application using NestJS CLIFirst, you need to install NestJS CLI on your local machine.Then hit the following command in the terminal to create a NestJS micro-service.automobile-backend is my application name and npm as my package manager.

nest new automobile-backend

Create the basic folder structure and required filesOpen the project in your IDE. I am using Visual Studio Code.Create a module called “automobile” to organize components.

nest g module automobile

Inside the automobile module, I create new files as a controller and service.

nest g controller automobile

nest g service automobile

My terminal window will look like thisAs you can see, it will automatically create spec files for testings and updated automobile.module.ts files.Since I am not going to create test cases here, I deleted spec files to make the application clear.Then I create a new file “vehicle.ts” as an entity to specify the properties of the vehicle. Up to now, it is an empty file.Set up TypeORM and DB configurationsI am using a local Postgres DB instance for data operations in this example. I have already installed PostgreSQL 13 and pgAdmin 4.TypeORM is one of the best ORM frameworks for NodeJS based applications.Import TypeORM module with Postgres for NestJS.

npm i — save @nestjs/typeorm typeorm pg

Now let’s create a new module for database configurations.

nest g module database

Then you can add relevant properties to the configuration file.database.module.tsThe properties can be easily understood.Then you need to add the TypeORM module as an import of the Automobile module.automobile.module.tsNow we can complete the Vehicle entity that we created earlier.Create an entityNow I am going to complete the Vehicle entity.Please check below entity classvehicle.tsCreate a REST APINow we can create a simple REST endpoint in our controller.Before doing this we need to import a few modules since we are planning a CSV file upload.Install multerFor better type-safety, let’s install the multer package

npm i -D @types/multer

Create an APIThen let’s create a new API for file uploading.Now my controller looks like this. I will explain them one by one.automobile.controller.ts

@Controller(‘/api/vehicles’)

This will make a class as a controller, very similar to Spring Boot @RestController.Inside brackets, you can set the path.

constructor

In the constructor, I injected the AutomobileService.

@Post(‘/upload’)

The file uploading process is a Post operation.@Post is a standard decorator in NestJS for HTTP POST just like @PostMapping in Spring Boot.

@UseInterceptors()

The complete file uploading process and uploaded file saving process are handled here.The uploaded file will be saved in disk storage.The file name will be a random stringThe selected file will be saved in the ./csv directoryIn uploadCsv() method, the uploaded file will be passed to AutomobileService class.Add the business logic to save dataNow we can set up the service class.The service class is decorated using the @Injectable() decorator, this looks the same as the @Service annotation in Spring Boot.Since we are receiving a CSV file from the front-end, we need to store it in the database after converting it into a JSON object.I am using csvtojson library to convert CSV files into JSON.Install csvtojson libraryHit the following command to install csvtojson library.

npm i — save csvtojson

Check csvtojson git repository for more details.Save data using TypeORMLook at the following service classautomobile.service.tsYou will be able to see TypeORM repository has been used to save data.This repository is very similar to Repositories in Spring Data JPA.Test your applicationNow we all set the back-end server. I just deleted generated app.controller.spec.ts, app.controller.ts, and app.service.ts because I am not going to use them.Then you can test your application, by hitting the below command.The application will run on port 3000.

npm run start:dev

Enable corsBefore we move into the front-end part, we need to enable cors on the server-side.In NestJS very simply we can do it by adding this to main.ts file

app.enableCors();

Now the client application can communicate with the server.

The complete code for this article can be found on GitHub. In the next article, I will complete the front-end part. You can find the original article from the below-mentioned link.

云奕文章网

File uploading example using NestJS and Angular 11

相关推荐：