Blobs with HTTP Post and Angular 5 — A short story

Suren Konathala
Oct 10, 2018 · 3 min read

Chapter 5: The climax

responseType: 'blob' as 'json'
instead of
responseType: 'blob'

Chapter 1: What i wanted to do

Chapter 2: The Challenges

Chapter 3: The Solution

Service.ts

thumbnailFetchUrl : string = "https://south/generateThumbnail?width=100&height=100&smartCropp";getBlobThumbnail(): Observable<Blob> {  
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Accept': 'application/json'
});
return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
{
"url": "http://acs/container/Logo.png"
}, {headers: headers, responseType: 'blob' as 'json' });
}

Component.ts

imageBlobUrl: string;getThumbnail() : void {
this.ablobService.getBlobThumbnail()
.subscribe(
(val) => {
this.createImageFromBlob(val);
},
response => {
console.log("POST in error", response);
},
() => {
console.log("POST observable is now completed.");
});
}
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageBlobUrl = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}

Component.html

<h2>Thumbnail imageBlobUrl</h2>
<img [src]="imageBlobUrl">

References


TechInPieces

Tech In Pieces

Suren Konathala

Written by

I’m a Software Developer, Solutions Architect, Inventor, Mentor, Blogger, Speaker and Love to Write. Works @Adobe

TechInPieces

Tech In Pieces