Windows Azure for Developers Task 14 : Working with Windows Azure BLOB storage

There are plenty of articles and blog posts about theoretical concept of BLOB are already available. So I am not going to rediscover the wheel. What could you expect from this post is a code walkthrough to perform

1. Insert Image in BLOB

2. Delete Image from BLOB

3. Fetch Image from BLOB

4. Create a container in BLOB

5. Ensure Container is available or not

Before I go to walkthrough one simple introduction of BLOB is, “BLOB is a type of storage in Windows Azure allows you to work with big size files

I may discuss full theoretical concept of BLOB in some other post but about scope of this post, I have already mentioned.

So let us start coding

1. Open visual studio as administrator

2. Create New project

3. Select CLOUD project from Cloud tab.

4. Add a web Role

Follow the below steps ,

Add Connection string for BLOB storage

To add a connection string you need to add it as setting of the Web Role. To add a setting right click on the Role and select Properties

clip_image001

Select Settings tab and add a new setting. To add a new setting you will have to click Add Setting at top. Give a name to setting. Here I am giving name DataConnectionString . From drop down select Connection String as a type

clip_image003

Once you have given name and type to new setting click on extreme right to provide value to the setting. I am going to use local storage. If you are planning to use Azure Storage then you will have to provide

1. Azure storage account credential

2. BLOB endpoint.

3. For local development fabric selects first option.

clip_image004

Add Container Name

To add Container name, essentially you need to add one more setting.

clip_image006

I am giving name as ContainerName, type as String and value as mygallery

There are few rules you need to keep in mind while giving name of the container

1. Must start with a number or letter or dash.

2. Must contain only lower case

3. Must be minimum 3 in length and maximum 63 characters in length.

Create a BLOB Utility class

I am going to create a Utility class. This class will contain all the basic functions related to BLOB storage.

I am going to have four basic functions

1. Get the Container

2. Ensure Container exist

3. Upload a file

4. Delete a file

5. Retrieve a file

Right click on WebRole project and add a class. I am giving name of the class BLOBUtility.

clip_image008

Make sure you have added the below namespaces and put the class a static.

Microsoft.WindowsAzure;
Microsoft.WindowsAzure.ServiceRuntime;
Microsoft.WindowsAzure.StorageClient
;

Basic structure of your class should look like below image

clip_image010

Write a function to get the Container

In BLOBUtility static class write a static function called GetContainer(). This function will return CloudBLOBContainer .

clip_image012

In above function,

First I am getting storage account. Make sure that you are passing correct Connection String Name. If you would have noticed, I created a connection string of name “DataConnectionString “in previous steps. So as input, I am passing DataConnectionString.

Second task I am doing is creating a BLOB Client.

Third task I am doing is getting the reference of container by passing the container name. Again if you would have noticed in previous steps I created a container of name “ContainerName

Write a function to ensure Container exist

In BLOBUtility static class write a static function called EnsureContainer(). This function will not return anything.

clip_image014

In above function,

First I am getting the Container and if container does not exist, creating it. I am setting the Public Access permission to Container.

Write a function to save Image

In static class BLOBUtility write a static function called InsertImage(). This function will not return anything

clip_image016

In above function, you need to pass metadata associated with the file as input parameter. A very important point worth noting here is that make sure you are passing an ID for sure as input parameter. At time of calling pass unique GUID as ID. Essentially there are three parts in above function.

1. Creating Metadata from input parameters.

2. Adding Metadata to the BLOB

3. Uploading Byte Array to the BLOB.

Write a function to Delete Image

In static class BLOBUtility write a static function called DeleteImage(). This function will not return anything

clip_image018

In above function as input parameter pass URI of image to delete. Using image URI get the BLOB reference and delete image file.

Once DeleteImage function is ready your BLOB Utility class is ready to use.

BLOBUtility.cs


using System;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
using System.Collections.Specialized;

namespace WebRole1
{
public static  class BLOBUtility
{

public static CloudBlobContainer GetContainer()
{
try
{
//var account = CloudStorageAccount.FromConfigurationSetting("DataConnectionString");
var account = CloudStorageAccount.Parse
(RoleEnvironment.GetConfigurationSettingValue
("DataConnectionString"));

var client = account.CreateCloudBlobClient();
var blobReference = client.GetContainerReference(RoleEnvironment.GetConfigurationSettingValue("ContainerName"));
return blobReference;
}
catch (Exception ex)
{
return null;
}
}

public static void EnsureContainer()
{
var container = GetContainer();
container.CreateIfNotExist();
var permission = container.GetPermissions();
permission.PublicAccess = BlobContainerPublicAccessType.Container;
container.SetPermissions(permission);
}

public static void InsertImage(string Id, string name, string fileName, string contentType, byte[] imageData)
{
var blob = GetContainer().GetBlobReference(name);
blob.Properties.ContentType = contentType;
var metaData = new NameValueCollection();
metaData["Id"] = Id;
metaData["FileName"] = fileName;
metaData["ImageName"] = name;
blob.Metadata.Add(metaData);
blob.UploadByteArray(imageData);

}

public static void DeleteImage(string imageURI)
{
var blob = GetContainer().GetBlobReference(imageURI);
blob.DeleteIfExists();
}
}
}

Design aspx page

Default.aspx


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebRole1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
<asp:Label ID="Label1" runat="server" Text="Select Image to Upload"></asp:Label> <br />
<asp:Label ID="Label2" runat="server" Text="Give File Name "></asp:Label>
<asp:TextBox ID="txtFileName" runat="server" Width="114px"></asp:TextBox> <br />
<asp:FileUpload ID="FileUpload1" runat="server" />
</p>
<asp:Button ID="btnUpload" runat="server" Text="Upload Image" Width="209px"
onclick="btnUpload_Click" />
<div>
<asp:ListView ID="images" runat="server" onitemdatabound="OnBlobDataBound">
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</LayoutTemplate>
<EmptyDataTemplate>
<h2>No Data Available</h2>
</EmptyDataTemplate>
<ItemTemplate>
<div>
<ul style="width:40em;float:left;clear:left" >
<asp:Repeater ID="blobMetadata" runat="server">
<ItemTemplate>
<li><%# Eval("Name") %><span><%# Eval("Value") %></span></li>
</ItemTemplate>
</asp:Repeater>
<li>
<asp:LinkButton ID="deleteBlob"
OnClientClick="return confirm('Delete image?');"
CommandName="Delete"
CommandArgument='<%# Eval("Uri")%>'
runat="server" Text="Delete" oncommand="OnDeleteImage" />

</ul>
<img src="<%# Eval("Uri") %>" alt="<%# Eval("Uri") %>" style="float:left"/>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</asp:Content>

I have put on the aspx page

1. One textbox

2. One File Upload Control

3. One List view with repeater control

I am binding List box with all the Images from BLOB

clip_image020

In above function I am setting as Data Source of repeater control Meta data values from the BLOB.

To bind the image control with Image from BLOB

clip_image022

For your reference full source code is as below,

Default.aspx.cs


using System;
using System.Linq;
using System.Web.UI.WebControls;
using Microsoft.WindowsAzure.StorageClient;

namespace WebRole1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BLOBUtility.EnsureContainer();

}

this.LoadImage();
}

private void LoadImage()
{

images.DataSource = BLOBUtility.GetContainer().ListBlobs(new BlobRequestOptions()
{
UseFlatBlobListing = true,
BlobListingDetails = BlobListingDetails.All
});
images.DataBind();

}

protected void btnUpload_Click(object sender, EventArgs e)
{
BLOBUtility.InsertImage(Guid.NewGuid().ToString(),txtFileName.Text,FileUpload1.FileName , FileUpload1.PostedFile.ContentType, FileUpload1.FileBytes);
LoadImage();
}

protected void OnDeleteImage(object sender, CommandEventArgs e)
{

if (e.CommandName == "Delete")
{

BLOBUtility.DeleteImage((string)e.CommandArgument);
}
LoadImage();

}
protected void OnBlobDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
var metadataRepeater = e.Item.FindControl("blobMetadata") as Repeater;
var blob = ((ListViewDataItem)(e.Item)).DataItem as CloudBlob;
if (blob != null)
{
if (blob.SnapshotTime.HasValue)
{
var delBtn = e.Item.FindControl("deleteBlob") as LinkButton;
if (delBtn != null) delBtn.Text = "Delete Snapshot";

}

if (metadataRepeater != null)
{
//bind to metadata
metadataRepeater.DataSource = from key in blob.Metadata.AllKeys
select new
{
Name = key,
Value = blob.Metadata[key]
};
metadataRepeater.DataBind();
}
}
}
}
}
}

Press F5 to run application on local development fabric interacting with BLOB storage.

4 thoughts on “Windows Azure for Developers Task 14 : Working with Windows Azure BLOB storage

  1. Could you please say me the code for displaying images which were retrived from the blob in the form of thumbnails

  2. Pingback: Monthly Report April 2011: Total Posts 21 « debug mode……

  3. Just wondering how one would go about sorting the list by date uploaded. As I upload more and more image I would love to have the most recent upload at the top.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s