In this tutorial, I will show you way to build Angular 11 File upload & download example with Spring Boot server.
Overview
We're gonna create a full-stack Angular 11 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 11 + Spring Boot File upload Architecture
Let's look at the architecture below:
Angular 11 Client:
-
FileUpload
Component callsUploadService
functions for upload/download/display files -
UploadService
usesHttpClientModule
to make HTTP requests
Spring Boot Server:
-
FilesController
receives the HTTP requests from Client, then callsFilesStorageService
functions for upload/download/getting files -
FilesStorageService
implements functions for storing and retrieving file systems using JavaFiles
library
Technology
Server:
- Java 8
- Spring Boot 2 (with Spring Web MVC)
- Maven 3.6.1
Client:
- Angular 11
- 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
usesFilesStorageService
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 11 Client for file upload/download UI
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)
: returnsObservable<HttpEvent<any>>
that we're gonna use for tracking progress -
getFiles()
: returns a list of Files' information asObservable
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 11 File upload example with progress bar & Bootstrap
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 11 Client with command:
ng serve --port 8081
Open Browser with url http://localhost:8081/
and check the result.
Further Reading
- https://angular.io/api/common/http/HttpRequest
- Angular 11 + Spring Boot: Pagination example
- Angular 11 + Spring Boot: JWT Authentication example
Fullstack CRUD App:
- Angular + Spring Boot + MySQL example
- Angular + Spring Boot + PostgreSQL example
- Angular + Spring Boot + MongoDB example
Serverless with Firebase:
Angular 11 Upload File to Firebase Storage example
Conclusion
Today we're learned how to build an example for upload Files from Angular 11 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
If you want to upload multiple files at once like this:
You can find the instruction here:
Angular 11 Multiple Files upload example
You will want to know how to run both projects in one place:
How to Integrate Angular with Spring Boot Rest API
Happy Learning! See you again.
Top comments (0)