Preview Azure Blob Image from Base64 Encoded string in AngularJS

Posted by in Azure category on for Beginner level | Points: 250 | Views : 8394 red flag

Azure Blob storage is a service for storing large amounts of unstructured data.In this article we will look how we can preview Blob Image from Base64 Encoded string in AngularJS.

 Download source code for Preview Azure Blob Image from Base64 Encoded string in AngularJS


Azure Blob storage is a service for storing large amounts of unstructured data. From Wikipedia

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

In this article we will look how we can preview Blob Image from Base64 Encoded string in AngularJS.

Step 1: Create a Source Blob Container in the Azure Portal

Open the Azure portal(, and then choose Storage Account say Containers

Create a source container say sourcecontainer

It will appear as

Step 2: Upload a file in the Source Container

Let us upload an image file in sourcecontainer.

Step 3: Making the WebAPI Controller

Open a WebAPI project is VS studio and add the below Nuget packages

Install-Package WindowsAzure.Storage

Install-Package Microsoft.WindowsAzure.ConfigurationManager

Also install CORS by issuing the command Install-Package Microsoft.AspNet.WebApi.Cors

Enable CORS setting inside the WebApiConfig.cs file as under

using System.Web.Http;
using System.Web.Http.Cors;

namespace WebApplication1
    public static class WebApiConfig
        public static void Register(HttpConfiguration config)
            // Web API configuration and services
            // Web API configuration and services    
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

            // Web API routes

                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }

Now create a folder say Utilities and add a class file say BlobImageService.cs file with the below content

using Microsoft.Azure;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System;
using System.IO;

namespace WebApplication1.Utilities
    public class BlobImageService
  	public string GetBase64BlobImageData(string blobName)
            string connectionString = CloudConfigurationManager.GetSetting("StorageConnectionString");

            // Retrieve storage account from connection string.
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(connectionString);

            // Create the blob client.
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

            // Retrieve reference to the blob container.
            CloudBlobContainer container = blobClient.GetContainerReference("sourcecontainer");

            // Retrieve reference to a blob
            CloudBlockBlob blobReference = container.GetBlockBlobReference(blobName);

            string base64Data;

            //Convert stream to base64 encoding
            using (var memoryStream = new MemoryStream())
                var bytes = memoryStream.ToArray();
                var b64String = Convert.ToBase64String(bytes);
                base64Data = "data:image/png;base64," + b64String;
            return base64Data;

The GetBase64BlobImageData function accepts the blobname, converts the blob image data to base64 encoded data and finally returns the string. Finally open the ValuesController.cs file and add the below code

using System.Web.Http;
using WebApplication1.Utilities;

namespace WebApplication1.Controllers
    public class ValuesController : ApiController

        public string GetPhotoData()
            BlobImageService df = new BlobImageService();
            var blobImageContent = df.GetBase64BlobImageData("1.jpg");
            return blobImageContent;

Running the application from PostMan yields

Step 4: Making the Image Preview from AngularJS

Create a index.html page and add the below content to it

<script src=""></script>
	<h2>Preview Blob Image from Base64 Encoded string</h2>
	<div ng-app="myApp" ng-controller="myCtrl">

		<img ng-src={{imageURL}} height="30%" width="30%">


		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $http) {

  			.then(function(response) {
      				$scope.imageURL =; }); });


The code is reading the content from the API exposed and binds the same to an image tag by setting the ng-src to the URL value returned from the API (http://localhost:12369/BlobImage/BlobImageData). The output is as under


In this article we looked into how to preview Blob Image from Base64 Encoded string in AngularJS. Hope this will be helpful. Thanks for reading. Zipped file attached.

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)