Azure Bits #1 – Up and Running

Back to all blogs

Badge-Azure

 

As Steve Porter mentioned in his blog post, How Wintellect Uses Microsoft Azure, we are making pretty heavy use of many offerings in the Azure toolset for our internal and client-facing web properties here at Wintellect and have been doing so from the early days of Azure. As we continue to experiment with new and/or improved Azure offerings, I thought it might be helpful to share some of the more interesting things we’ve worked through as we explore that ever-increasing world that is Azure.

As the first sample application for these Azure Bits posts, I will create a small image manipulator example in Azure. This example will allow me to demonstrate several pieces of the Azure stack working together, including an Azure hosted web app, Azure Blob Storage, an Azure Queue, and an Azure hosted WebJob.

Azure Image Manipulator

For this first version of the Azure Image Manipulator, the user will only be able to browse and select an image from their computer and submit the image for processing. When the user submits the image, the original image will be inserted into Azure Blob Storage and a message will be placed in an Azure Queue indicating that a new image has been uploaded and needs to have a thumbnail created. In follow-up posts, I will create a WebJob that monitors the Azure Queue and when a new image message is detected, it will process the message from the queue, fetch the original image from Azure Blob Storage, and create a manipulated (thumbnail) copy and save this new image to Azure Blob Storage with a known URL.

I’m keeping it very simple for this first revision and only creating a single hard-coded thumbnail at 200 x 300 pixels.  That way, I can focus on the Azure moving parts and not get lost in how many cool options I can allow on the manipulated image. Once I have the basic pipeline in place for uploading and background processing of these images, I could add functionality such as allowing the user to drag-and-drop multiple images or upload a zip file of images. I could also allow the user to select multiple thumbnail sizes, add a watermark, generate a different image format, or any other image manipulation algorithms I wanted to offer for the resultant manipulated images. This could be very helpful for a user creating a catalog of products that need to be viewable on different devices where images need to be suitable for the particular presentation and not visually compromised by stretching or squashing a single version of the image.

Azure Account Setup and Web App Published

Before we get started developing the Azure Image Manipulator, you’ll need to create an Azure account. You can get a free one month trial of Azure at the Microsoft Azure sign up page. This takes only five minutes to accomplish and is demonstrated in the Sign up for Microsoft Azure video from Scott Hanselman.  If you’ve already got a functional Azure account, even better…you saved 5 minutes.

Next, we want to get an ASP.NET MVC web app up and running in Azure. That might sound a bit intimidating if you haven’t done it yet, but it’s not. Once more, I’ll refer you to Mr. Hanselman for a quick 3 minute video entitled Create an ASP.NET Website using Visual Studio.  In the video, he will walk you through spinning up a default ASP.NET MVC site all way to deploying your new web app to your Azure account.

I’ll assume at this point that you have a functional ASP.NET MVC web app running in Azure that we can gut and use for our own purposes.

Let’s See Some Code

The basic flow of our functionality is that we will accept the uploaded image from the user via a form POST on the HomeController. The HomeController will then package this into a class we are creating called UploadedImage. This is the model for everything we need to know about the image and the blueprint for the copies we want created. An instance of UploadedImage will later be inserted into the Azure Queue as our message to indicate that an image is ready for processing.

First, we’ll need to create a couple of model classes for UploadedImage and Thumbnail, like this:

Model classes
  1. public class UploadedImage
  2. {
  3.     public UploadedImage()
  4.     {
  5.         // hard-coded to a single thumbnail at 200 x 300 for now
  6.         Thumbnails = new List<Thumbnail> { new Thumbnail { Width = 200, Height = 300 } };
  7.     }
  9.     public string Name { get; set; }
  10.     public string ContentType { get; set; }
  11.     public byte[] Data { get; set; }
  12.     public string Url { get; set; }
  13.     public List<Thumbnail> Thumbnails { get; set; }
  14. }
  15. public class Thumbnail
  16. {
  17.     public int Width { get; set; }
  18.     public int Height { get; set; }
  19.     public string Url { get; set; }
  20. }

 

Next, in the default HomeController, we’ll need to add an Upload action method to handle the posting of the file to the server.  In the interest of keeping the Controller pretty lightweight, I’m going to create an ImageService to handle the image-centric logic.  I have exposed this and I refer to it in my HomeController via an interface, IImageService. However, you’ll note that I’ve skipped the Dependency Injection for this simple example and just instantiated a concrete instance of ImageService in my HomeController.  We’ll get to ImageService in just a bit.  For now, just add this to your HomeController:

 

HomeController.cs
  1. private readonly IImageService _imageService = new ImageService();
  3. [HttpPost]
  4. public async Task<ActionResult> Upload(FormCollection formCollection)
  5. {
  6.     var model = new UploadedImage();
  7.     if (Request != null)
  8.     {
  9.         HttpPostedFileBase file = Request.Files[“uploadedFile”];
  10.         model = await _imageService.CreateUploadedImage(file);
  11.     }
  12.     return View(“Index”, model);
  13. }

 

Now add the ImageService and IImageService.  You’ll notice that for Url, I’ve just returned the incoming image as a base-64 encoded data url.  Once we move to storing the image in Azure Blob Storage, I’ll replace that with the building of the actual url pointing to Azure Blob Storage.

 

IImageService / ImageService
  1. public interface IImageService
  2. {
  3.     Task<UploadedImage> CreateUploadedImage(HttpPostedFileBase file);
  4. }
  5. public class ImageService : IImageService
  6. {
  7.     public async Task<UploadedImage> CreateUploadedImage(HttpPostedFileBase file)
  8.     {
  9.         if ((file != null) && (file.ContentLength > 0) && !string.IsNullOrEmpty(file.FileName))
  10.         {
  11.             byte[] fileBytes = new byte[file.ContentLength];
  12.             await file.InputStream.ReadAsync(fileBytes, 0, Convert.ToInt32(file.ContentLength));
  14.             return new UploadedImage
  15.             {
  16.                 ContentType = file.ContentType,
  17.                 Data = fileBytes,
  18.                 Name = file.FileName,
  20.                 // temporarily build a data url to return
  21.                 Url = String.Format(“data:image/jpeg;base64,{0}“, Convert.ToBase64String(fileBytes))
  22.             };
  23.         }
  24.         return null;
  25.     }
  26. }

 

Finally, you can replace the contents of your HomeIndex.cshtml with this:

 

Index.html
  1. @model AzureBytes1.Models.UploadedImage
  3. @using (Html.BeginForm(“Upload”, “Home”, FormMethod.Post, new { enctype = “multipart/form-data” }))
  4. {
  5.     <div class=”jumbotron”>
  6.         <h3>Image Manipulator</h3>
  7.         <div>
  8.             <input name=”uploadedFile” class=”form-control” type=”file” style=”max-width: 800px; width: 500px;“/>
  9.         </div>
  11.         <button class=”btn btn-primary” type=”submit”>Upload File</button>
  13.         <div class=”well well-sm”>
  14.             <img src=”@Model.Url“ />
  15.         </div>
  16.     </div>
  17. }

 

At this point, you should be able to hit F5 and see the application run. You should be able to select an image and click the Upload button and you should see the image displayed in the page.

Publish and Wrap Up

Before I conclude this post, let’s go ahead and publish our updated web app to Azure.  It’s as easy as right-clicking on your web project in the Solution Explorer and selecting “Publish..” and then clicking the Publish button.  If you have any trouble, refer back to the second video I linked above from Scott Hanselman.  He walks through the process in that video.

In Azure Bits #2 – Saving the Image to Azure Blob Storage, I walk you through setting up an Azure Blob Storage account and a Blob Storage Container in the Azure Portal and show how to use these in ImageService to save the original image to Azure Blob Storage and to view the Azure-published image in the browser.

 

 

 

Stay Informed

Sign up for the latest blogs, events, and insights.

We deliver solutions that accelerate the value of Azure.
Ready to experience the full power of Microsoft Azure?
Start Today

Atmosera is thrilled to announce that we have been named GitHub AI Partner of the Year.

X