In this tutorial, we’re gonna build an Angular 11 Token based Authentication & Authorization with Web Api Application (including HttpInterceptor, Router & Form Validation) that implements JWT Authentication. I will show you:
JWT Authentication Flow for User Signup & User Login
Project Structure for Angular 11 Authentication with HttpInterceptor, Router
How to implement HttpInterceptor
Creating Login, Signup Components with Form Validation
Angular Components for accessing protected Resources
How to add a dynamic Navigation Bar to Angular App
We’re gonna create a full-stack Angular 10 File upload to Spring Boot Server in that user can:
see the upload process (percentage)
view all uploaded files
download by clicking on the file name
All uploaded files will be saved in uploads folder:
Angular 10 + Spring Boot File upload Architecture
Let’s look at the architecture below:
Angular Client:
FileUpload Component calls UploadService functions for upload/download/display files
UploadService uses HttpClientModule to make HTTP requests
Spring Boot Server:
FilesController receives the HTTP requests from Client, then calls FilesStorageService functions for upload/download/getting files
FilesStorageService implements functions for storing and retrieving file systems using Java Files library
Technology
Server:
Java 8
Spring Boot 2 (with Spring Web MVC)
Maven 3.6.1
Client:
Angular 10
RxJS 6
Bootstrap 4
Spring Boot Rest APIs for File Upload & Storage
Spring Boot App will provide APIs
Methods
Urls
Actions
POST
/upload
upload a File
GET
/files
get List of Files (name & url)
GET
/files/[filename]
download a File
This is the project structure:
– FileInfo contains information of the uploaded file. – FilesStorageService helps us to initialize storage, save new file, load file, get list of Files’ info, delete all files. – FilesController uses FilesStorageService to export Rest APIs: POST a file, GET all files’ information, download a File. – FileUploadExceptionAdvice handles exception when the controller processes file upload. – application.properties contains configuration for Servlet Multipart. – pom.xml for Spring Boot dependency.
This is the project structure that we’re gonna build:
– We import necessary library, components in app.module.ts. – upload-file.service provides methods to save File and get Files from Spring Boot Server. – upload-files.component contains upload form, progress bar, display of list files. – app.component is the container that we embed all components. – index.html for importing the Bootstrap.
Angular Service for File Upload This service will use Angular HTTPClient to send HTTP requests. There are 2 functions:
upload(file): returns Observable<HttpEvent<any>> that we’re gonna use for tracking progress
getFiles(): returns a list of Files’ information as Observable object
Angular Component for File Upload File Upload Component has Progress Bar, Card, Button and Message. It injects UploadFileService to call uploadService.upload() method.
The upload progress will be calculated basing on event.loaded and event.total. If the transmission is done, the event will be a HttpResponse object. At this time, we call uploadService.getFiles() to get the files’ information and assign the result to fileInfos variable.
Today we’re learned how to build an example for upload Files from Angular 10 to Spring Boot server. We also provide the ability to show list of files, upload progress using Bootstrap, and to download file from the server.
We use cookies to improve your experience with the site. To find out more, you can read the full Privacy & PolicyAccept
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.