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

blob.CreateIfNotExists();

 // 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();

            tMyBlob.DownloadToStream(tMemoryStream);

            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">

                   </div>

            Comment – Put a progress image for checking the progress.

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

 

Follow the CSS styles below (Optional)

<style

 /*Profile pic: picture frame div*/

        .divFrame {

            height: 100px;

            background-color: rgba(128, 128, 128, 0.25);

            text-align: center;

         }

    </style>

 

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.

$(Document).ready(function(){

//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

    $.ajax({

            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

                    $("#previewProgress").show();

            },

            error: function (xhr, status) {

// Hide the progress image for checking the status

                $("#previewProgress").hide();

// 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

                pContainerToRender.empty();

//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

                pContainerToRender.append(tImg);

//Hide the progress bar

                $("#previewProgress").hide();

            }

        });

    }

}

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.