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 in AngularJS.
Introduction
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 in AngularJS.
Step 1: Create a Source Blob Container in the Azure Portal
Open the Azure portal(https://portal.azure.com), 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();
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
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;
namespace WebApplication1.Utilities
{
public class BlobImageService
{
public string GetImageURI(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);
//Retrieve the blob URI(e.g. 1.jpg)
string datauri = blobReference.Uri.ToString();
return datauri;
}
}
}
The GetImageURI function accepts the blobname and returns it's URI. Finally open the ValuesController.cs file and add the below code
using System.Web.Http;
using WebApplication1.Utilities;
namespace WebApplication1.Controllers
{
[RoutePrefix("BlobImage")]
public class ValuesController : ApiController
{
[Route("BlobImageData")]
[HttpGet]
public string GetPhotoData()
{
BlobImageService df = new BlobImageService();
var blobImageContent = df.GetImageURI("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
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Preview Blob Image from URI in AngularJS</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<img ng-src={{imageURL}} height="30%" width="30%">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:12369/BlobImage/BlobImageData")
.then(function(response) {
$scope.imageURL = response.data; }); });
</script>
</body>
</html>
The code is reading the content from the API exposed and bings 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
Conclusion
In this article we looked into how to preview Blob Image from AngularJS. Hope this will be helpful. Thanks for reading. Zipped file attached.