In this tutorial, I will show you way to build Angular 14 Multiple File upload example using with FormData and Bootstrap Progress Bars.
More Practice:
– Angular Multiple Images Upload with Preview example
– Angular + Spring Boot: File upload example
– Angular + Node Express: File Upload example
– Angular CRUD Application with Rest API
– Angular Login and Registration example with Web Api
– Using Material: Angular Material Image upload with Preview example
Newer version: Angular 15 Multiple Files upload example with Progress Bar
Contents
- Overview
- Technology
- Rest API for File Upload & Storage
- Setup Angular 14 Project
- Angular 14 multiple Files upload project
- Set up App Module
- Add Bootstrap to the project
- Create Angular Service for Upload Multiple Files
- Create Angular 14 Component for Upload Multiple Files
- Add Upload Multiple Files Component to App Component
- Run the App
- Further Reading
- Conclusion
- Source Code
Overview
We will create an Angular 14 Multiple Files upload with progress bars application in that user can:
- see the upload process (percentage) of all uploading files
- see the notification message of each file upload status
- view all uploaded files
- download file by clicking on the file name
If one of the upload progress is not successful:
If you want to upload Images with Preview:
Please visit: Angular Multiple Images Upload with Preview example
Technology
- Angular 14
- RxJS 7
- Bootstrap 4
Rest API for File Upload & Storage
Here is the API that our Angular App will work with:
Methods | Urls | Actions |
---|---|---|
POST | /upload | upload a File |
GET | /files | get List of Files (name & url) |
GET | /files/[filename] | download a File |
You can find how to implement the Rest APIs Server at one of following posts:
– Node.js Express File Upload Rest API example
– Node.js Express File Upload to MongoDB example
– Node.js Express File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example
Setup Angular 14 Project
Let’s open cmd and use Angular CLI to create a new Angular Project as following command:
ng new angular-14-multiple-file-upload
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
We also need to generate some Components and Services:
ng g s services/file-upload
ng g c components/upload-files
Now you can see that our project directory structure looks like this.
Angular 14 multiple Files upload project
Let me explain it briefly.
– We import necessary library, components in app.module.ts.
– file-upload.service provides methods to save File and get Files from Rest API Server.
– upload-files.component contains upload multiple files form, some progress bars, display of list files.
– app.component is the container that we embed all components.
– index.html for importing the Bootstrap.
Set up App Module
Open app.module.ts and import HttpClientModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { UploadFilesComponent } from './components/upload-files/upload-files.component';
@NgModule({
declarations: [
AppComponent,
UploadFilesComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Add Bootstrap to the project
Open index.html and add following line into <head>
tag:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
</head>
...
</html>
Another way is installing Bootstrap module with command: npm install [email protected]
.
Then add following code into src/style.css:
@import "~bootstrap/dist/css/bootstrap.css";
Create Angular Service for Upload Multiple Files
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 progressgetFiles()
: returns a list of Files’ information asObservable
object
services/file-upload.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FileUploadService {
private baseUrl = 'http://localhost:8080';
constructor(private http: HttpClient) { }
upload(file: File): Observable<HttpEvent<any>> {
const formData: FormData = new FormData();
formData.append('file', file);
const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
reportProgress: true,
responseType: 'json'
});
return this.http.request(req);
}
getFiles(): Observable<any> {
return this.http.get(`${this.baseUrl}/files`);
}
}
– FormData
is a data structure that can be used to store key-value pairs. We use it to build an object which corresponds to an HTML form with append()
method.
– We set reportProgress: true
to exposes progress events. Notice that this progress event are expensive (change detection for each event), so you should only use when you want to monitor it.
– We call the request(PostRequest)
& get()
method of HttpClient
to send an HTTP POST & Get request to the Multiple Files Upload Rest server.
Create Angular 14 Component for Upload Multiple Files
Let’s create a Multiple Files Upload UI with Progress Bars, Card, Button and Message.
First we need to use the following imports:
upload-files.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { FileUploadService } from 'src/app/services/file-upload.service';
Then we define the some variables and inject FileUploadService
as follows:
export class UploadFilesComponent implements OnInit {
selectedFiles?: FileList;
progressInfos: any[] = [];
message: string[] = [];
fileInfos?: Observable<any>;
constructor(private uploadService: FileUploadService) { }
}
The progressInfos
is an array that contains items for display upload progress of each files. Each item will have 2 fields: value & fileName.
Next we define selectFiles()
method. It helps us to get the selected Files that we’re gonna upload.
selectFiles(event): void {
this.message = [];
this.progressInfos = [];
this.selectedFiles = event.target.files;
}
Now we iterate over the selected Files above and call upload()
method on each file item.
uploadFiles(): void {
this.message = [];
if (this.selectedFiles) {
for (let i = 0; i < this.selectedFiles.length; i++) {
this.upload(i, this.selectedFiles[i]);
}
}
}
Next we define upload()
method for uploading each file:
upload(idx: number, file: File): void {
this.progressInfos[idx] = { value: 0, fileName: file.name };
if (file) {
this.uploadService.upload(file).subscribe({
next: (event: any) => {
if (event.type === HttpEventType.UploadProgress) {
this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
const msg = 'Uploaded the file successfully: ' + file.name;
this.message.push(msg);
this.fileInfos = this.uploadService.getFiles();
}
},
error: (err: any) => {
this.progressInfos[idx].value = 0;
const msg = 'Could not upload the file: ' + file.name;
this.message.push(msg);
this.fileInfos = this.uploadService.getFiles();
}
});
}
}
We use idx
for accessing index of the current File to work with progressInfos
array. Then we call uploadService.upload()
method on the file
.
The 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.
We also need to do this work in ngOnInit()
method:
ngOnInit(): void {
this.fileInfos = this.uploadService.getFiles();
}
Now we create the HTML template of the Upload multiple Files UI.
Add the following content to upload-files.component.html file:
<div class="row">
<div class="col-8">
<label class="btn btn-default p-0">
<input type="file" multiple (change)="selectFiles($event)" />
</label>
</div>
<div class="col-4">
<button
class="btn btn-success btn-sm"
[disabled]="!selectedFiles"
(click)="uploadFiles()"
>
Upload
</button>
</div>
</div>
<div *ngFor="let progressInfo of progressInfos" class="mb-2">
<span>{{ progressInfo.fileName }}</span>
<div class="progress">
<div
class="progress-bar progress-bar-info"
role="progressbar"
attr.aria-valuenow="{{ progressInfo.value }}"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: progressInfo.value + '%' }"
>
{{ progressInfo.value }}%
</div>
</div>
</div>
<div *ngIf="message.length" class="alert alert-secondary my-3" role="alert">
<ul *ngFor="let msg of message; let i = index">
<li>{{ msg }}</li>
</ul>
</div>
<div class="card mt-3">
<div class="card-header">List of Files</div>
<ul class="list-group list-group-flush">
<li *ngFor="let file of fileInfos | async" class="list-group-item">
<a href="{{ file.url }}">{{ file.name }}</a>
</li>
</ul>
</div>
Add Upload Multiple Files Component to App Component
Open app.component.html and embed the UploadFiles Component with <app-upload-files>
tag.
<div class="container" style="width:600px">
<div class="my-3">
<h3>bezkoder.com</h3>
<h4>{{ title }}</h4>
</div>
<app-upload-files></app-upload-files>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 14 Multiple Files Upload';
}
Run the App
If you use one of following server:
- Node.js Express File Upload Rest API example
- Node.js Express File Upload to MongoDB example
- Node.js Express File Upload to Google Cloud Storage example
- Spring Boot Multipart File upload (to static folder) example
You need run with port 8081
for CORS origin http://localhost:8081
with command:
ng serve --port 8081
Open Browser with url http://localhost:8081/
and check the result.
Further Reading
- Angular Multiple Images Upload with Preview example
- Angular Login and Registration example with Web Api
- Angular CRUD Application with Rest API
- Angular Form Validation example (Reactive Forms)
- Angular + Spring Boot: File upload example
- Angular + Node Express: File Upload example
Conclusion
Today we're learned how to build an example for multiple Files upload to Rest API using Angular 14 and FormData. We also provide the ability to show list of files, multiple progress bars using Bootstrap.
You can find how to implement the Rest APIs Server at one of following posts:
- Node.js Express File Upload Rest API example
- Node.js Express File Upload to MongoDB example
- Node.js Express File Upload to Google Cloud Storage example
- Spring Boot Multipart File upload (to static folder) example
Source Code
The source code for this Angular 14 Client is uploaded to Github.
If you want to upload Images with Preview:
Please visit: Angular Multiple Images Upload with Preview example