How to Integrate Angular with Spring Boot Rest API

In this tutorial, I will show you step by step to integrate Angular project with Spring Boot Rest API so that Spring Boot and Angular will run in one project. You will also know how to configure Angular SPA Routing to avoid Whitelabel Error Page.

Other versions:
Integrate Angular 8 with Spring Boot Rest API
Integrate Angular 10 with Spring Boot Rest API
Integrate Angular 11 with Spring Boot Rest API
Integrate Angular 12 with Spring Boot Rest API

Read More

Kotlin List & Mutable List tutorial with examples

In this tutorial, I will show you many methods and functions to work with List & MutableList in Kotlin. You’re gonna know:

  • Introduction to Kotlin List
  • How to create, initialize, access, update, remove items in a MutableList
  • How to combine multiple Lists, get subList of a List in Kotlin
  • Ways to iterate, reverse, find items in a Kotlin List

Related Posts:
Kotlin – Sort List of custom Objects
Kotlin Queue tutorial with examples
Kotlin HashMap tutorial with examples

Read More

Angular 10 + Spring Boot: File upload example

In this tutorial, I will show you way to build File upload & download example using Angular 10, Bootstrap and Spring Boot.

More Practice:
Thymeleaf + Spring Boot: File Upload example
Angular 10 + Spring Boot example: Build a CRUD App
Angular 10 + Spring Boot: JWT Authentication example
Angular 10 + Spring Boot: Pagination example

Serverless with Firebase:
Angular 10 Firebase Storage: File Upload/Display/Delete example

Newer versions:
Angular 11 + Spring Boot: File upload example
Angular 12 + Spring Boot: File upload example
Angular 13 + Spring Boot: File upload example
Angular 14 + Spring Boot: File upload example
Angular 15 + Spring Boot: File upload example
Angular 16 + Spring Boot: File upload example

Overview

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

angular-10-spring-boot-file-upload-example-demo

All uploaded files will be saved in uploads folder:

angular-10-spring-boot-file-upload-example-folder

Angular 10 + Spring Boot File upload Architecture

Let’s look at the architecture below:

angular-10-spring-boot-file-upload-architecture

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 17 / 11 / 8
  • Spring Boot 3 / 2 (with Spring Web MVC)
  • Maven

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:

angular-10-spring-boot-file-upload-example-server-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.

You can find Step by Step to implement the Spring Boot Server at:
Spring Boot Multipart File upload (to static folder) example

Or: Spring Boot Multipart File upload (to database) example

Angular 10 Client for file upload/download UI

This is the project structure that we’re gonna build:

angular-10-spring-boot-file-upload-client-project-structure

– 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
export class UploadFileService {

  constructor(private http: HttpClient) { }

  upload(file: File): Observable<HttpEvent<any>> {
    ...
  }

  getFiles(): Observable<any> {
    ...
  }
}

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.

upload() {
  this.progress = 0;

  this.currentFile = this.selectedFiles.item(0);
  this.uploadService.upload(this.currentFile).subscribe(
    event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        this.message = event.body.message;
        this.fileInfos = this.uploadService.getFiles();
      }
    },
    err => {
      this.progress = 0;
      this.message = 'Could not upload the file!';
    });
}

You can find step by step with more details in the tutorial:
Angular 10 File upload example with progress bar

Run the App

Run Spring Boot Server with command: mvn spring-boot:run.
Refresh the project directory and you will see uploads folder inside it.

Because we configure CORS for origin: http://localhost:8081, so you need to run Angular 10 Client with command:
ng serve --port 8081

Open Browser with url http://localhost:8081/ and check the result.

Further Reading

Using Template Engine:
Thymeleaf + Spring Boot: File Upload example

Fullstack CRUD App:
Angular 10 + Spring Boot + MySQL example
Angular 10 + Spring Boot + PostgreSQL example
Angular 10 + Spring Boot + MongoDB example

Serverless with Firebase:
Angular 10 Firebase Storage: File Upload/Display/Delete example

Newer versions:
Angular 11 + Spring Boot: File upload example
Angular 12 + Spring Boot: File upload example
Angular 13 + Spring Boot: File upload example
Angular 14 + Spring Boot: File upload example
Angular 15 + Spring Boot: File upload example

Conclusion

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.

Next tutorials will show you way to implement the full-stack (with source code):
– Back-end: File Upload to Static folder / File Upload to Database
– Front-end: Angular 10 / Angular 11 / Angular 12 / Angular 13 / Angular 14 / Angular 15

If you want to upload multiple files at once like this:

angular-10-multiple-files-upload-example

You can find the instruction here:
Angular 10 Multiple Files upload example

You will want to know how to run both projects in one place:
How to Integrate Angular 10 with Spring Boot Rest API

Happy Learning! See you again.