Share your holiday photos (or those taken last night...) with this Photo Sharing Series

Sign in to queue


So you have a bunch of photos from the holidays? While you know all about the different photo sharing services and sites, as a dev you'd like to build your own sharing service wouldn't you? And maybe use that as a chance to play with building a mobile app that hooks to Windows Azure?

Check out this in-progress series on doing just that!

Theory of a Cloud Based Photo Sharing App using Windows Phone and Azure

In the next couple of posts we’re going to go on a bit of a tangent and discuss how you can connect your Windows Phone application to the cloud. Whilst a lot of these concepts can be applied to any of the cloud service providers, for the purpose of this discussion we’re going to focus on Windows Azure.

The example we’re going to work through is a photo sharing style application, Capture TechEd, which was actually created in preparation for my Phone+Cloud session at the recent TechEd NZ and TechEd Australia events. In summary the application allows a user to take a photo and share it to other users of the Capture TechEd application. The sequence of events is as follows:

  • User takes a photo using the Capture TechEd application
  • User enters a comment and assigns the photo to a particular TechEd Track
  • Photo is uploaded to Blob Storage
  • Uploaded photo URL, Comment and Track information is added to a Queue for processing
  • Photo is dequeued and resized to 173×173 (the size of a Windows Phone Start tile)
  • Toast Notification is sent to all users of the app to update their Start tile to the new photo.

In this post we’re going to go through each of these steps at a high level so that you understand the concepts. Then in subsequent posts we’ll go through each step in detail with the code that you’ll need to implement each step.

Step 1: Taking the Photo with the Camera

Step 2: Upload the Photo to Blob Storage

Step 3: Uploading the Processing Job

Step 4: Adding Job to Queue

Step 5: Image Processing

Step 6: Update Start Tiles via Notification

Step 7: Retrieve Recent Photos

A Practical Guide to Photo Sharing Apps using Windows Phone and Azure

The previous post in this series was called Theory of a Cloud Based Photo Sharing App using Windows Phone and Azure. We went through the architecture for a simple image sharing application. Steps 1 to 5 in this process involve taking a photo with the camera and uploading it to blob storage. To follow along with this article you’ll need to install both the Windows Phone SDK and the Windows Azure SDK for Visual Studio.

Step 1: Creating the Phone Application


private CameraCaptureTask camera = new CameraCaptureTask();
private string filename;
public MainPage() {
    camera.Completed += CameraCompleted;
private void CameraCompleted(object sender, PhotoResult e)  {
    var bmp = PictureDecoder.DecodeJpeg(e.ChosenPhoto);
    filename = Guid.NewGuid() + ".jpg";
    using (var file = IsolatedStorageFile.GetUserStoreForApplication().OpenFile(filename, FileMode.Create, FileAccess.Write)) {
        bmp.SaveJpeg(file, bmp.PixelWidth, bmp.PixelHeight, 0, 100);
    CaptureImage.Source = bmp;
private void CaptureClick(object sender, RoutedEventArgs e) {
private void UploadClick(object sender, RoutedEventArgs e) { }

Step 2: Creating the Cloud Application

The next step is to create our cloud project, which can be added to the same solution that contains your phone application. Right-click on the Solution node in Solution Explorer and select Add > New Project, and in the Add New Project dialog select the Windows Azure Project template from within the Cloud node.


Step 3: Generating a Shared Access Signature

In order to upload the photo from our Windows Phone application directly into Windows Azure Blob Storage we need to know one of the two access keys issued via the Windows Azure Management Console for the storage account you want to upload to. These keys are designed to be use within web sites or services that are located on a server, not for inclusion within client applications. Silverlight, whether it is used to build desktop applications or applications for Windows Phone, is a client technology and you should not include access keys within these applications.


Step 4: Retrieving the SharedAccessSignature

Now that we have a service which will generate the shared access signature we need to call that from within our Windows Phone application. In order to do this we need to add a reference to the UploadService to the Windows Phone project. Make sure you have built the solution and can browse to the UploadService (right-click on UploadService.svc and select View in Browser). ...

Step 5: Completing the Upload

The last step is to call the UploadUriWithSharedAccessSignature method to retrieve the SAS, which is then used to upload the photo to Blob Storage. The following code starts by calling this method, then when response is received, the photo is uploaded to Blob Storage using the CloudBlobUploader class. The full code for this class is available at the end of this post.



This is just the start of the series, where you're now uploading your photos to Azure. Keep an eye for the future posts for the rest of the story...


Here’s a few more links you might find interesting:

The Discussion

Add Your 2 Cents