In this tutorial, I will show you how to make Angular 11 File Upload Application with Firebase Storage using @angular/fire & AngularFireStorage. Files’ info will be stored in Firebase Realtime Database for Display/Delete operations.
A CSV (comma-separated values) file is a plain text file that contains data which format is described in RFC4180. In this tutorial, I will show you how to upload/import CSV file data into MySQL Database using Node.js Express & fast-csv.
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
Spring Boot 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.