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.
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:
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
Java 17 / 11 / 8
Spring Boot 3 / 2 (with Spring Web MVC)
Spring Boot Rest APIs for File Upload & Storage
Spring Boot App will provide APIs
upload a File
get List of Files (name & url)
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.
The Excel file is a spreadsheet file format created by Microsoft for use with Microsoft Excel. You can use the file to create, view, edit, analyse data, charts, budgets and more. In this tutorial, I will show you how to use Spring Boot to download Excel file from a table in MySQL Database using Apache POI.
In this tutorial, we’re gonna build a Spring Boot GraphQL example that will expose CRUD APIs to create, read, update and delete objects in MongoDB database with the help of graphql-java and Spring Data.
GraphQL is a query language that offers an alternative model to developing APIs (REST, SOAP or gRPC) with detailed description.
In this tutorial, we’re gonna build a Spring Boot GraphQL example that will expose CRUD Rest APIs to create, read, update and delete objects in MySQL database with the help of graphql-spring-boot-starter and Spring Data JPA.