Updated: Please read the Background on Shared Access Signatures from this post then move to this updated post – How to upload an Image to Windows Azure Storage using Mobile Services – that will show you how to make use of the Windows Azure Storage SDK for Node.
Windows 8 How to upload an Image using Blob Storage SAS generated by Windows Azure Mobile Services
This post details the specific scenario on how to capture an image on windows 8 and upload it directly to Windows Azure Blob Storage using a Shared Access Signature (SAS) generated within Windows Azure Mobile Services. It demonstrates and alternative approach suited for larger scale implementations (i.e using a SAS) when contrasted with the following article Storing Images from Android in Windows Azure Mobile Services
Note: This topic is advanced and assumes that you have a good knowledge of the Windows Azure Blob REST API and Windows Azure Mobile Services. I would suggest you check out the following tutorials and Blob Storage REST API prior to starting
Note: that although this is specifically an image example you could upload any media/binary data to blob storage using the same approach.
Background – Shared Access Signature
What Are Shared Access Signatures?
A Shared Access Signature is a URL that grants access rights to containers, blobs, queues, and tables. By specifying a Shared Access Signature, you can grant users who have the URL access to a specific resource for a specified period of time. You can also specify what operations can be performed on a resource that’s accessed via a Shared Access Signature. In the case of Blobs operations include:
- Reading and writing page or block blob content, block lists, properties, and metadata
- Deleting, leasing, and creating a snapshot of a blob
- Listing the blobs within a container
Why not just use the storage account name and key directly?
There are a few standout reasons:
- Security – When building device applications you should not store your storage account name and key within the device app. The reason is that it makes your storage account susceptible to being misused. If someone were to reverse engineer your application take your storage account key then they would essentially have access to 100TB of cloud based storage until such a time that you realized and reset the key. The safer approach is to use a SAS as it provides a time boxed token with defined permissions to a defined resource. With policies the token can also be invalidated/revoked
- Scale Out (and associated costs)- A common approach I see is uploading an image directly through their web tier e.g a Web API or Mobile Service unfortunate consequence of this at scale is that you are unnecessarily loading your web tier. Consider that each of your instances on your web tier has a limited network I/O. Uploading images directly through this will result in maxing out that I/O and the need to scale out (add more instances) much sooner then alternative approaches. Now consider a scenario where your application requests only a SAS from your web tier you have now moved MBs or image load off your web tier and instead replaced it with a small ~ 100 – 200 byte SAS. This essentially means a single instance now will provide much more throughput and your upload I/O now directly hits the Blob storage service
What is the general workflow for uploading a blob using a SAS?
- Request a SAS from your service
- SAS returned from your service
- Upload blob (image/video/binary data) directly to Blob Storage using the SAS
- Storage service returns response
For this post we will focus specifically on how to write/upload a blob using a shared access signature that is generated in the mobile service insert trigger.
Creating your Mobile Service
In this post I will extend the Mobile Services quick start sample. Before proceeding to the next section create a mobile service and download the quickstart as detailed in the tutorial here
Capturing the Image|Media
Our first task is to capture the media we wish to upload. To do this follow the following steps.
- Add an AppBar to MainPage.xaml with a take photo button to allow us to capture the image
- Add the OnTakePhotoClick handler and use the CameraCaptureUI class for taking photo and video
|1 2 3 4 5 6 7 8 9 10 11||
|1 2 3 4 5 6 7 8 9 10 11||
Generating a Shared Access Signature (SAS) using Mobile Services server-side script
In this step we add sever-side script to generate a SAS on insert operation of the TodoItem table.
To do this perform the following steps:
- Navigate to your Mobile Service and select the Data Tab, then click on Todoitem
- Select Script, then the Insert drop down
- Add the following server side script to generate the SAS
- To generate the sas we must insert a todoItem. which will now return the SAS property for the image. Thus update the OnTakePhotoClick handler to insert an item.
- Update OnTakePhotoClick handler to update the image directly to blob storage using the HttpClient and the generated item.SAS
Note: this code assumes there is already a public container called test.
Note:Simple example of Generating a Windows Azure blob SAS in Node created using the guidance here.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122||
Uploading the Image directly to storage using the SAS
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15||
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30||
Run the application
- Hit F5 on the application and right click with your mouse to show the app bar
- Press the Take Photo button
- Observe that the SAS is returned from your Mobile Service
- Check your storage account now has the captured virtual High Five photo/video