In this tutorial, I will show you way to build Angular 11 File upload & download example with Spring Boot server.
Original Post: https://bezkoder.com/angular-11-spring-boot-file-upload/
All uploaded files will be saved in uploads folder:
Angular 11 Client:
FileUpload
Component calls UploadService
functions for upload/download/display filesUploadService
uses HttpClientModule
to make HTTP requestsSpring Boot Server:
FilesController
receives the HTTP requests from Client, then calls FilesStorageService
functions for upload/download/getting filesFilesStorageService
implements functions for storing and retrieving file systems using Java Files
libraryClient:
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.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 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 progressgetFiles()
: returns a list of Files' information as Observable
objectexport 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
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.
Fullstack CRUD App:
Serverless with Firebase:
Angular 11 Upload File to Firebase Storage example
Next tutorials will show you way to implement the full-stack (with source code):
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.
#angular #spring #spring-boot #spring-framework #web-development #fullstack