Post
Ask Question

Upload Images To Azure Media Service From Client Side

If you are new to the Azure media service account, I strongly recommend that you read my previous post related to media service accounts. Once we create a media service account, we will create an asset and get the SAS token related to the asset we created. Here, we will discuss more about assets and SAS tokens. I hope you will like this.

Download the source code

You can always download the source code here: Azure Media Service From Client Side

Background

For the past few weeks I have been working in Azure . Recently I got a requirement of storing images to Azure. Thus, I decided to create a media service account for this requirement. The tricky part was I needed to upload the files from the client side itself. Here we are going to see how we can create an Azure media service account and how to use the same.

What is a media service account?

  • A media service account is an Azure-based account which gives you access to cloud-based media services in Azure.
  • Stores metadata of the media files you create, instead of saving the actual media content.
  • To work with a media service account, you must have an associated storage account.
  • While creating a media service account, you can either select the storage account you already have or you can create a new one.
  • Since the media service account and storage account is treated separately, the content will be available in your storage account even if you delete your media service account

Please note that your storage account region must be the same as your media service account region.

Prerequisites

  • Visual Studio
  • Azure account with active subscription

If you are a start up company or you are thinking of starting a new one, you can always go for BizSpark (Software and services made for the start ups); to join please check here: How to join bizspark. Or you can always create a free account here.

Things we are going to do

The following are the tasks we are going to do.

  • Creating an Azure media service account.

If you don’t have an Azure account with an active subscription, you must create it first before going to do this task.

  • Create an Asset in Media service account
  • Get the SAS token for an Asset
  • Client side upload process
  • Retrieves the uploaded items

Now we will go and create our media service account.

Create an Azure media service account

To create an azure media service account, please see the link given below. I have explained the steps there.

Hope you have the storage account and media service account with you.

Create an Asset in Media service account

You can always create an Asset either via code or manually in https://portal.azure.com.

Asset
Blob Service In Portal,

New Container
New Container

If you want to create the Asset via code, you can create it as below.

  1. public static string CreateBLOBContainer(string containerName) {  
  2.     try {  
  3.         string result = string.Empty;  
  4.         CloudMediaContext mediaContext;  
  5.         mediaContext = new CloudMediaContext(mediaServicesAccountName, mediaServicesAccountKey);  
  6.         IAsset asset = mediaContext.Assets.Create(containerName, AssetCreationOptions.None);  
  7.         return asset.Uri.ToString();  
  8.     } catch (Exception ex) {  
  9.         return ex.Message;  
  10.     }  
  11. }  
You can always get the sample codes for creating the assets from here: Azure Media Service Account. 

Get the SAS token for an Asset

Before going to generate SAS, we want to know what an SAS is, right?

What is SAS?

SAS stands for shared access signature, it is the mechanism used for giving limited access to the objects in your storage account to your clients, in a way that you do not need to share your account key. In SAS, you can set how long the given access must be active and you can always set the read/write access too. If you want to know more about SAS, I recommend you read it here.

Once you download the application from here, you can add a function to generate the SAS token dynamically.

  1. private static string GenerateSASToken(string assetId)  
  2. {  
  3.     CloudStorageAccount backupStorageAccount = CloudStorageAccount.Parse(myAzureCon);  
  4.     CloudBlobClient client = backupStorageAccount.CreateCloudBlobClient();  
  5.     CloudBlobContainer container = client.GetContainerReference(assetId);  
  6.     BlobContainerPermissions permissions = container.GetPermissions();  
  7.     permissions.SharedAccessPolicies.Add(string.Concat(assetId, "AccessPolicy"), new SharedAccessBlobPolicy  
  8.     {  
  9.         Permissions = SharedAccessBlobPermissions.Read | SharedAccessBlobPermissions.Write,  
  10.             SharedAccessExpiryTime = DateTime.UtcNow.AddDays(365)  
  11.     });  
  12.     permissions.PublicAccess = BlobContainerPublicAccessType.Container;  
  13.     container.SetPermissions(permissions);  
  14.     ServiceProperties sp = client.GetServiceProperties();  
  15.     sp.DefaultServiceVersion = "2013-08-15";  
  16.     CorsRule cr = new CorsRule();  
  17.     cr.AllowedHeaders.Add("*");  
  18.     cr.AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Put | CorsHttpMethods.Post;  
  19.     cr.AllowedOrigins.Add("*");  
  20.     cr.ExposedHeaders.Add("x-ms-*");  
  21.     sp.Cors.CorsRules.Clear();  
  22.     sp.Cors.CorsRules.Add(cr);  
  23.     client.SetServiceProperties(sp);  
  24.     var sas = container.GetSharedAccessSignature(new SharedAccessBlobPolicy(), string.Concat(assetId, "AccessPolicy"));  
  25.     return container.Uri + sas;  
  26. }  
Here we are giving the asset id of the asset we just created. And the function will give you the SAS token we need. I hope you understood. Now we can start our client side coding for uploading. 

Client side upload process

Create an index page with an input file and other needed UI as follows.

  1. <!doctype html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
  7.     <link href="CSS/Index.css" rel="stylesheet" /> </head>  
  8.   
  9. <body>  
  10.     <div class="container">  
  11.         <div class="thumbnail-fit" id="azureImage">  
  12.             <div id="fiesInfo"></div>  
  13.             <div id="divOutput"></div>  
  14.         </div>  
  15.     </div>  
  16.     <div id="uploaderDiv">  
  17.         <form> <span class="input-control text">  
  18. <input type="file" id="file" multiple accept="image/*" name="file" />  
  19. </span> <br /> <br /> <input type="button" value="Upload File" id="buttonUploadFile" /> </form>  
  20.     </div>  
  21.     <script src="scripts/jquery-1.10.2.min.js"></script>  
  22.     <script src="scripts/jquery-ui-1.9.2.min.js"></script>  
  23.     <script src="scripts/Index.js"></script>  
  24. </body>  
  25.   
  26. </html>  
Now create a JS file Index.js. And create a file change function as follows. Sounds good?
  1. $(document).ready(function()  
  2. {  
  3.     $('#fiesInfo').html('');  
  4.     $('#divOutput').html('');  
  5.     upldCount = 0;  
  6.     totSize = 0;  
  7.     $('#file').change(function()  
  8.      {  
  9.         selectedFile = [];  
  10.         if (this.files.length > 0)  
  11.         {  
  12.             $.each(this.files, function(i, v)  
  13.             {  
  14.                 totalFileSize = totalFileSize + v.size;  
  15.                 selectedFile.push  
  16.                 ({  
  17.                     size: v.size,  
  18.                     name: v.name,  
  19.                     file: v  
  20.                 });  
  21.             });  
  22.         }  
  23.     });  
  24. });  
Here we are pushing the selected files to an array in a needed format. Now we will add the upload click event.
  1. $("#buttonUploadFile").click(function(e)  
  2. {  
  3.     upload();  
  4. }); 
And following is the code for the function upload.
  1. function upload()  
  2. {  
  3.     $('#fiesInfo').html('');  
  4.     $('#divOutput').html('');  
  5.     upldCount = 0;  
  6.     totSize = 0;  
  7.     startDateTime = new Date();  
  8.     $('#fiesInfo').append('<span><b> Uploading starts at </b></span>' + startDateTime);  
  9.     if (selectedFile == null)  
  10.     {  
  11.         alert("Please select a file first.");  
  12.     } else  
  13.     {  
  14.         for (var i = 0; i < selectedFile.length; i++)  
  15.         {  
  16.             fileUploader(selectedFile[i]);  
  17.             upldCount = upldCount + 1;;  
  18.             totSize = totSize + selectedFile[i].size;  
  19.         }  
  20.     }  
  21. };  
Did you notice that we are calling a function inside a loop which accepts file content as parameter?
  1. function fileUploader(selectedFileContent)  
  2. {  
  3.     reader = new FileReader();  
  4.     var fileContent = selectedFileContent.file.slice(0, selectedFileContent.size - 1);  
  5.     reader.readAsArrayBuffer(fileContent);  
  6.     reader.onloadend = function(evt)   
  7.     {  
  8.         if (evt.target.readyState == FileReader.DONE)  
  9.         {  
  10.             var currentAzureStorageUrl = baseUrl;  
  11.             var indexOfQueryStart = currentAzureStorageUrl.indexOf("?");  
  12.             var uuid = generateUUID();  
  13.             var fileExtension = selectedFileContent.name.split('.').pop();  
  14.             var azureFileName = uuid + '.' + fileExtension;  
  15.             submitUri = currentAzureStorageUrl.substring(0, indexOfQueryStart) + '/' + azureFileName + currentAzureStorageUrl.substring(indexOfQueryStart);  
  16.             var requestData = new Uint8Array(evt.target.result);  
  17.             ajaxUploadCall(submitUri, requestData);  
  18.         }  
  19.     };  
  20. }  
Here baseUrl is the SAS you just created for an asset. The example of SAS is,

https://myaccount.blob.core.windows.net/sascontainer/sasblob.txt?sv=2015-04-05&st=2015-04-29T22%3A18%3A26Z&se=2015-04-30T02%3A23%3A26Z&sr=b&sp=rw&sip=168.1.5.60-168.1.5.70&spr=https&sig=Z%2FRHIX5Xcg0Mq2rqI3OlWTjEg2tYkboXr1P9ZUXDtkk%3D 

Once the reader event is finished we are passing the uri and data in the format of an array. Can we see the AJAX call now?

  1. function ajaxUploadCall(submitUri, selectedFileContent)  
  2. {  
  3.     $.ajax  
  4.     ({  
  5.         url: submitUri,  
  6.         type: "PUT",  
  7.         data: selectedFileContent,  
  8.         processData: false,  
  9.         async: false,  
  10.         beforeSend: function(xhr)  
  11.         {  
  12.             xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');  
  13.         },  
  14.         success: function(data, status) {},  
  15.         complete: function(event, xhr, settings)  
  16.         {  
  17.             compCount = compCount + 1;  
  18.             if (selectedFile.length == compCount)  
  19.             {  
  20.                 RptDisplay();  
  21.             }  
  22.         },  
  23.         error: function(xhr, desc, err) {}  
  24.     });  
  25. }  
In your ajax call please do not forget to add the header as below.
  1. beforeSend: function(xhr)   
  2. {  
  3.     xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');  
  4. }  
If all selected files are uploaded we are calling a function RptDisplay() right?
  1. function RptDisplay()  
  2. {  
  3.     $('#divOutput').hide();  
  4.     $('#fiesInfo').append('<table></table>');  
  5.     $('#fiesInfo table').append('<tr><td><b>No of files uploaded: </b></td><td>' + upldCount + '</td></tr>');  
  6.     $('#fiesInfo table').append('<tr><td><b>Total size uploaded: </b></td><td>' + formatSizeUnits(totSize) + '</td></tr>');  
  7.     var endDateTime = new Date();  
  8.     $('#fiesInfo table').append('<tr><td><b>Uploading ends at </b></td><td>' + endDateTime + '</td></tr>');  
  9.     $('#fiesInfo table').append('<tr><td><b>The time taken is </b></td><td>' + findDateDiff(startDateTime, endDateTime) + '</td></tr>');  
  10.     $('#divOutput').show();  
  11. };  
You can get all the other needed functions like findDateDiff(), formatSizeUnits(), generateUUID() and the CSS from the source code attached. Please download the same. Now please run your page and you can find an input file there, select a few files and try upload, if you have configured everything fine, I am sure you will get a report. Let us see that now. 

Upload File
Upload File

Upload File Output
Upload File Output

Retrieves the uploaded items

To retrieve the items you can always create a function as follows, which accepts asset id as parameter.

  1. public string getEventImage(string assetID)  
  2. {  
  3.     CloudStorageAccount backupStorageAccount = CloudStorageAccount.Parse(myAzureCon);  
  4.     CloudBlobClient client = backupStorageAccount.CreateCloudBlobClient();  
  5.     CloudBlobContainer container = client.GetContainerReference(assetID.Replace("nb:cid:UUID:", "asset-"));  
  6.     List < string > results = new List < string > ();  
  7.     foreach(IListBlobItem item in container.ListBlobs(null, false))   
  8.     {  
  9.         results.Add(item.Uri.ToString());  
  10.     }  
  11.     return JsonConvert.SerializeObject(results);  
  12. }  
Now if you login to your azure portal and click on the asset you created, you can see the contents are uploaded there.

Uploaded Contents
Uploaded Contents

Conclusion

Did I miss anything that you may think which needed? Have you ever tried an Azure media service account? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Please see this article in my blog here.


Similar Articles