Thursday, 6 June 2013

Downloading of an image from Azure Blob Storage

To download an image from the blob storage for showing in profile picture, we will call a WCF service method that returns a combination of bytes of the image as the result which needs to be rendering to an html control (which will hold the profile picture).

Please follow the below steps –

Step 1: Create a WCF service method for downloading the image from the azure blob storage.

// pass parameter as pImageName, that need to be downloaded from blob

   public String ClientDownload(string pImageName)
//Authenticate the user and get the Client Id
Let’s say this is ClientId

//Get the cloud storage account
 var tStorageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("DataConnectionString"))

// initialize queue storage
            CloudBlobClient tBlobStorage = tStorageAccount.CreateCloudBlobClient();
Blobs tBlob = StorageBlob.Blobs.fileupload;
            CloudBlobContainer tBlob = tBlobStorage.GetContainerReference(tBlob.ToString() + "-" + ClientId.ToString().ToLower());
//Create the container if it is not existing

 // Retrieve reference to a blob
CloudBlockBlob tMyBlob = tContainer.GetBlockBlobReference(pImageName);

// If there is no reference, show the exception

if (!tMyBlob.Exists())
                throw new WebFaultException<String>("File not found", HttpStatusCode.NotFound);

//Handling the image code and convert into into base 64 format
            MemoryStream tMemoryStream = new MemoryStream();
            Byte[] tFile = tMemoryStream.ToArray();
String tFileAsBase64 = "";
tFileAsBase64 = strBase64Img = System.Convert.ToBase64String(tFile, 0, tFile.Length);

            return tFileAsBase64;

Step 2: Create an html control for holding the image.

            Comment – Create a html <div> to hold the picture.

                   <div id="divPreview" class="divFrame">

            Comment – Put a progress image for checking the progress.

                   <img id="previewProgress" src=" loader_Progress.gif" />


Follow the CSS styles below (Optional)

 /*Profile pic: picture frame div*/
        .divFrame {
            height: 100px;
            background-color: rgba(128, 128, 128, 0.25);
            text-align: center;


Step 3: Get result from a WCF service method by an Ajax call.

On the page load call a function to get the image code and render it into an html control.

Let’s say the function name is RenderPreview.


//function for download and render the image code into a html control.
RenderPreview($("#divPreview"),"SamplePicture.png" , false);

This is a custom method in Jquery, which is containing three parameters

Ø  Html control where we will render the image code

Ø  Picture name which picture code needs to download from the blob storage

Ø  Boolean value which shows the progress image

//Mehod to get the image code and render to a html control
function RenderPreview(pContainerToRender, pImageName, pIsProgress) {
    if (pImageName != "" && pImageName != undefined && pImageName != null) {
   // Call WCF service method by an Ajax call
            url: _”WCFAddressUrl/ClientDownload/" + pImageName,
            type: 'GET',
            dataType: 'json',
            beforeSend: function (req) {
             if (pIsProgress)  //show the progress image(waiting)
// Show the progress image for checking the status
            error: function (xhr, status) {
// Hide the progress image for checking the status

// Display some error message if comes here
            success: function (result) {
//set the default extension of the image is jpg
                var tExt = "jpg";
//Split by dot ”.”
                var tSplittedName = pImageName.split(".");
//Get the image actual extension

                if (tSplittedName.length == 2) {
                    tExt = tSplittedName[1];

                var tImageSrc = "data:image/jpeg;base64," + result; // JPEG AVOID CHROME WARNING

//Make empty to the rendering control

//Make an image variable                
var tImg = $("<img />")
                                .attr("alt", "image")
                                .attr("src", tImageSrc);

//put the styles on the image variable
                tImg.css("height", "100%");    //Image is creating dynamically so css need to define in the page (exception case)
                tImg.css("max-height", "290px");
//Render the image into HTML control

//Hide the progress bar
Please find the abbreviation about marked by green above in the code

ClientDownload- This is WCF service method for downloading the image(C# code).
pImageName- Pass the parameter to WCF service method.
Result – Get the image code into base 64 string format.

Please follow the all steps, it should work fine.

No comments:

Post a Comment