Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Preview Blobs With HTTP POST and Angular 5

DZone's Guide to

How to Preview Blobs With HTTP POST and Angular 5

In this quick but helpful article, a software architect documents how to upload images to a web page using Angular and HTTP POST.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

With Angular, we can call a web service to get an image as a Blob, convert that to an image and display it on a web page. This may sound like a straight and standard use case but I ended up spending a lot of time trying to get this to work and a lot of asking around. This has been one of the main motivations to write this article.

What I Wanted to Do

To begin with, I am building a website that displays thumbnails retrieved from a URL. On clicking on the thumbnail, the full sized image loads in a new page. Like a typical carousel, but the catch is that the thumbnail is generated dynamically and does not load from or stored on the local machine.

Use-case: Image at a URL → Run through a Web service to get thumbnail → Web service responds with a thumbnail of the image → Display the thumbnail on the web page.

The Challenges

  1. Make an HTTP POST to get a blob/image — We need to send some input parameters (image URL, keys) to the web service that validates your input and sends the image as a blob (assuming the external service does the thumbnail generation for you).
  2. Convert JSON/blob to an image/thumbnail — HTML cannot understand and display blob (weird characters) that the service returns.

The Solution

With a combination of Angular and vanilla JavaScript, we can achieve this as below.

service.ts

thumbnailFetchUrl : string = "https://south/generateThumbnail?width=100&height=100";

getBlobThumbnail(): Observable<Blob> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json'      
    });
    return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
      {
        "url": "http://acs/Logo.png"
      }, {headers: headers, responseType: 'blob' as 'json' });
  }

component.ts

imageBlobUrl: string | null = null;

getThumbnail() : void {
    this.ablobService.getBlobThumbnail()
      .subscribe((val) => {
          this.createImageFromBlob(val);
        },
        response => {
          console.log("POST - getThumbnail - in error", response);
        },
        () => {
          console.log("POST - getThumbnail - observable is now completed.");
        });
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      this.imageBlobUrl = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

Since the Angular service ablobService returns a blob, we create an image from it using createImageFromBlob .

component.html

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

Image title

The image/thumbnail will be displayed on the HTML web page. 

References

  • Environment: Angular 5.0.0.
  • Live example and code on GitHub (coming soon).
  • StackOverflow on this issue.
  • Discussion on Angular GitHub about this issue.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
angular ,web dev ,http post ,tutorial ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}