Here is an example of Angular Material Image Upload for you:
upload-image.component.html:
<div *ngFor="let progressInfo of progressInfos">
<span>{{ progressInfo.fileName }}</span>
<mat-toolbar class="progress-bar">
<mat-progress-bar
color="accent"
[value]="progressInfo.value"
></mat-progress-bar>
<span class="progress">{{ progressInfo.value }}%</span>
</mat-toolbar>
</div>
<mat-form-field>
<div>
<mat-toolbar>
<input matInput [value]="selectedFileNames.length ? selectedFileNames : 'Select Images'" />
<button
mat-flat-button
color="primary"
[disabled]="!selectedFiles"
(click)="uploadFiles()"
>
Upload
</button>
</mat-toolbar>
<input
type="file"
id="fileInput"
name="fileInput"
accept="image/*" multiple
(change)="selectFiles($event)"
/>
</div>
</mat-form-field>
<div>
<img *ngFor='let preview of previews' [src]="preview" class="preview">
</div>
<div *ngIf="message.length" class="message">
<ul *ngFor="let msg of message; let i = index">
<li>{{ msg }}</li>
</ul>
</div>
<mat-card class="list-card">
<mat-card-header>
<mat-card-title>List of Images</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let image of imageInfos | async" class="list-item">
<p matLine><a href="{{ image.url }}">{{ image.name }}</a></p>
<img src="{{ image.url }}" alt="{{ image.name }}" height="50px"/>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
upload-imges.component.ts:
import { Component, OnInit } from '@angular/core';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { FileUploadService } from '../../services/file-upload.service';
@Component({
selector: 'app-upload-images',
templateUrl: './upload-images.component.html',
styleUrls: ['./upload-images.component.css']
})
export class UploadImagesComponent implements OnInit {
selectedFiles?: FileList;
selectedFileNames: string[] = [];
progressInfos: any[] = [];
message: string[] = [];
previews: string[] = [];
imageInfos?: Observable<any>;
constructor(private uploadService: FileUploadService) {}
ngOnInit(): void {
this.imageInfos = this.uploadService.getFiles();
}
selectFiles(event: any): void {
this.message = [];
this.progressInfos = [];
this.selectedFileNames = [];
this.selectedFiles = event.target.files;
this.previews = [];
if (this.selectedFiles && this.selectedFiles[0]) {
const numberOfFiles = this.selectedFiles.length;
for (let i = 0; i < numberOfFiles; i++) {
const reader = new FileReader();
reader.onload = (e: any) => {
console.log(e.target.result);
this.previews.push(e.target.result);
};
reader.readAsDataURL(this.selectedFiles[i]);
this.selectedFileNames.push(this.selectedFiles[i].name);
}
}
}
upload(idx: number, file: File): void {
this.progressInfos[idx] = { value: 0, fileName: file.name };
if (file) {
this.uploadService.upload(file).subscribe(
(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.imageInfos = this.uploadService.getFiles();
}
},
(err: any) => {
this.progressInfos[idx].value = 0;
const msg = 'Could not upload the file: ' + file.name;
this.message.push(msg);
}
);
}
}
uploadFiles(): void {
this.message = [];
if (this.selectedFiles) {
for (let i = 0; i < this.selectedFiles.length; i++) {
this.upload(i, this.selectedFiles[i]);
}
}
}
}
Take a look at the live Stackblitz demo here.