File uploading example using NestJS and Angular 11 — Part 2

This is the second part of the File uploading example using NestJS and Angular 11 — Part 1. In this article, I am going to talk about how to create a client application using Angular 11.

Create a new Angular application using Angular CLI

• As I mentioned in the previous article, Angular CLI needs to be installed.
• Then hit the below command to create a new Angular application.
• automobile-frontend is my application name.

ng new automobile-frontend

Run Angular application

• Go inside the automobile-frontend directory.
• Then hit the below command to run the application.

ng serve -o

• Now your client application will run on port 4200 and the default page will be shown.

Expected UI

• I will be using a basic fixed navbar, the navbar component will handle this.
• The home component will be used as a parent component for routing

Create the basic structure

• I am going to create some components for this application.

Create components

• I am going to create three components, called home, navbar, and upload.
• Create the home component.

ng g c home — skip-tests=true

• Create the upload component

ng g c upload — skip-tests=true

• Create the navbar component

ng g c navbar — skip-tests=true

• I skipped tests when creating the above components.

• The above screenshot shows all components that we have created and their selectors (selector name can be changed. But I will use default selectors.
• app-home
• app-navbar
• app-upload

Install Bootstrap

• I am using a simple Bootstrap template in this application.
• So we need to install Bootstrap.
• You can install Bootstrap or you can use ng-bootstrap as well. But I am using Bootstrap 3, old but simple to use. You can use any preferred version.

npm install bootstrap@3.3.7

• Then add @import “~bootstrap/dist/css/bootstrap.css”; into the styles.css file
• I am not going to add jquery for this project.

Add a template for the navbar

• I will use a basic bootstrap navbar template.

• In the future, I will add more to this navbar.
• As you can see I’ve used routerLink to route the upload component
• Here is the app-routing.module.ts file
• In this file, I have created a route to the upload component.
• Then /upload will route to the upload component.

Refactor home-component

• The home-component will be used for routing.
• All other components except nav-bar will be inside of the home-component.
• Changes are not required for the home.component.ts file.
• The only thing you need to do is, add the following line to the home.component.html file

<router-outlet></router-outlet>

Add upload functionality

• Once the user clicks on the upload file in the navbar, the upload component will take the user.
• In the upload component, I am going to handle the file uploading form and its functionalities.
• Look at the upload.component.html file

• Here I am using a simple reactive form.
• Now check how the upload.component.ts file looks like.

• The HttpClient is used to call our back-end API for file uploading and our back-end service also need to start. The back-end service will run on port 3000 (http://localhost:3000/api/vehicles/upload)
• To make this work, you need to import used modules in the app.module.ts

• Now we are all set to launch.
• If you have any doubts or missing parts, please check the given Github link at the end of this article.

Test the application

• Hit ng serve -o to launch the application.
• Now the UI will look like this.

• Now you can select a CSV file (I already shared a CSV file in the GIT repository) and upload it to check everything works fine.
• You may check consoles for any errors and if you are getting any errors, please check your code with my code.
• Here is the link to the Github repository for the complete project.

Please read the original article from the below link,

File uploading example using NestJS and Angular 11 — Part 2