Storing blob (huge files) on Azure Storage using Web API.

There are many advantages of having a blob (huge files, e.g, videos, documents, large CAD files, etc.) stored in your Azure Storage using  your own Web API services.

With your own Web API services you can extend the information of your blob and save it in a database.  For example, if you have a video and you want to add a title, the date it was created and a brief description to setup a keyword and saved in the database while uploading the file, so that when the time comes you can just query the database to get it quickly.

The first step in setting up this application is to have a Web API that can communicate with your Azure Storage.  I found this blog by Dave Donaldson to be very helpful, in fact, I used it as the core service in uploading the blob in my projects.

You need to modify the provider to accept multiple type of information, not just files, from your client.  The blog also did not give example on the client code, and because of these limitations I decided to make this blog so that we can use the example code written by Dave in a real-world applications.

Having written that long introduction, its time to dig in to the code.  The first part, is our client code, which is just a jquery ajax call using FormData object (RFC 7578).

From the code below, you just have to take note of the File Element (Input with type=”file” property) and the XHR function, which is used to provide percentage upload for the users.

var data = new FormData();

var title = document.getElementById('title').value;
var dateCreated = document.getElementById('dateCreated').value;
var description = document.getElementById('description').value;
var file = document.getElementById('files').files[0];

data.append(title, null);
data.append(dateCreated, null);
data.append(description, null);
data.append("File", file, file.name);

$.ajax({
  url: "/api/Blobs/Add",
  method: "POST",
  contentType: false,
  processData: false,
  data: data,
  async: true,
  xhr: function () {},
  success: function (data) {alert("file uploaded..");}
});

Now its time to modify the provider from Dave’s blog – BlobStorageUploadProvider, this is the class that performs the actual upload to your Azure Storage.

This is the tricky part, took me a couple of hours to figure it out.  The trick was just to put an if inside the foreach statement.  The foreach statement runs through your FormData object, so what I did was just to capture the first three fileData and upload only the last fileData, which your actual file, to the storage.

....
int counter = 1;
string title = "";
string dateCreated = "";
string description = "";
foreach (var fileData in FileData) {
if(counter == 4) {
  var fileName =
  Path.GetFileName(fileData.Headers.ContentDisposition.FileName.Trim('"'));

  var blobContainer = BlobHelper.GetBlobContainer();
  var blob = blobContainer.GetBlockBlobReference(fileName);

  blob.Properties.ContentType = fileData.Headers.ContentType.MediaType;

  using (var fs = File.OpenRead(fileData.LocalFileName))
  {
     blob.UploadFromStream(fs);
  }

  File.Delete(fileData.LocalFileName);

  var blobUpload = new BlobUploadModel
  {
     FileName = blob.Name,
     FileUrl = blob.Uri.AbsoluteUri,
     FileSizeInBytes = blob.Properties.Length,
     Title = title,
     DateCreated = dateCreated,
     Description = description
  };

  Uploads.Add(blobUpload);
} else {
     if(counter==1) title = fileData.Headers.ContentDisposition.Name.Replace("\"","");
     if(counter==2) dateCreated = fileData.Headers.ContentDisposition.Name.Replace("\"","");
     if(counter==3) description = fileData.Headers.ContentDisposition.Name.Replace("\"","");
}
}
....

Fantastic! now you have added an information to your blob while uploading it to your Azure Storage.

IMPORTANT!  There are two things you need to do before modifying the provider:

  1. Modify the BlobUploadModel to add the new properties
  2. Modify your controller to capture the result and save it to your database.

That’s it!  And if you find this blog helpful, you can make the donation by clicking the Paypal button below.


 

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s