Image upload in angular

 html

<div fxLayout="column" class="attachment-add-content form-subsection-wrapper">

<label class="mat-caption gray-54 label-no-wrapper">{{ 'Logo / Image' | i18n }}</label>

<label id="fileuploadbutton" class="mat-button mat-primary mat-raised" for="take-picture">Select a

document</label>

<div class="show-picture-outer-wrapper" *ngIf="showPicture">

<div id="show-picture-wrapper">

<img id="show-picture" src="{{imgURL}}" alt="preview" />

</div>

</div>

<span id="filenamedisplay" class="" *ngIf="showName"> {{fileName}}</span>

<input type="file" id="take-picture" (change)="fileProgress($event)"

accept="application/*|audio/*|video/*|image/*|text/*|multipart/*|message/*|model/*" />

</div>

ts

fileProgress(e: any) {

let files = e.target.files;

if (files && files.length > 0) {

this.file = files[0];

let mime = (this.file.type || this.file.mimeType);

if (mime && mime.match(/image./)) {

// /this.imgURL = URL.createObjectURL(this.file);

let reader = new FileReader();

reader.readAsDataURL(this.file); // read file as data url

reader.onload = (event) => { // called once readAsDataURL is completed

this.imgURL = event.target.result;

}

this.showName = false;

this.showPicture = true;

} else {

this.showName = true;

this.showPicture = false;

this.fileName = this.file.name;

}

}

}

Foreach and combine

const observables: Observable<any>[] = data.map(item => {

item = JSON.parse(item);

return this.facilityService.getFacilityName(item.facility);

});

let sub1 = combineLatest(observables).pipe(

take(1),

map((names) => {

return names;

})

).subscribe((result) => {

sub1 && sub1.unsubscribe();

// console.log("facilti name ", result);

let returnResult = {};

if(data.length == result.length){

data.map((item, i) => {

item = JSON.parse(item);

returnResult[item.facility] = result[i];

});

}

callback(returnResult);

});