Hackathon Guide : Uploading an Image to your hack

There are couple of ways to upload images to Azure

Using Blob Storage

Azure Blob storage is a service for storing large amounts of unstructured data, such as text or binary data, that can be accessed from anywhere in the world via HTTP or HTTPS. You can use Blob storage to expose data publicly to the world, or to store application data privately.

Common uses of Blob storage include:

  • Serving images or documents directly to a browser(covered below)
  • Storing files for distributed access
  • Streaming video and audio
  • Performing secure backup and disaster recovery
  • Storing data for analysis by an on-premises or Azure-hosted service


Getting Started with Blob Storage with Node, Java , C++ , PHP,  Ruby, Python, and Xamarin:

The links below will get you up and running with Blob storage up and  running on Azure using on couple of languages.  You will learn how to:

  • Create :  A storage account,  an application , and a container.
  • Configure :  An application and access  storage
  • How to:  upload  a blob to  a container , list blobs in a container,  download  blobs, delete blob, concurrent access, and work with shared access signatures.

Using Blob Storage with:

Node How to link Java How to link C++ How to link PHP How to link Ruby How to link Python How to link Xamarin How to link

Different ways  you can upload images into Azure


Upload Images to Azure Images using Blob +Mobile Services

Let’s do this !

First we need some keys

  1. In the Management Portal, click Storage, click the storage account, then click Manage Keys.
  2. Copy your Storage Account Name and Access Key.
  3. Go to your mobile service(see pre-reqs),
    1. click the Configure tab, scroll down to App settings and enter a Name and Value pair for each of the following that you obtained from the storage account, then click Save.

Note: Make sure that Dynamic schema is enabled. You need dynamic schema enabled to be able to add new columns to the TodoItem table(created in the Azure Mobile Services)

var azure = require('azure');
var qs = require('querystring');
var appSettings = require('mobileservice-config').appSettings;
	function insert(item, user, request) {
    // Get storage account settings from app settings. 
    var accountName = appSettings.STORAGE_ACCOUNT_NAME;
    var accountKey = appSettings.STORAGE_ACCOUNT_ACCESS_KEY;
    var host = accountName + '.blob.core.windows.net';
	if ((typeof item.containerName !== "undefined") && (
    item.containerName !== null)) {
        // Set the BLOB store container name on the item, which must be lowercase.
        item.containerName = item.containerName.toLowerCase();
	// If it does not already exist, create the container 
        // with public read access for blobs.        
        var blobService = azure.createBlobService(accountName, accountKey, host);
        blobService.createContainerIfNotExists(item.containerName, {
            publicAccessLevel: 'blob'
        }, function(error) {
            if (!error) {
	// Provide write access to the container for the next 5 mins.        
                var sharedAccessPolicy = {
                    AccessPolicy: {
                        Permissions: azure.Constants.BlobConstants.SharedAccessPermissions.WRITE,
                        Expiry: new Date(new Date().getTime() + 5 * 60 * 1000)
	// Generate the upload URL with SAS for the new image.
                var sasQueryUrl = 
                item.resourceName, sharedAccessPolicy);
	// Set the query string.
                item.sasQueryString = qs.stringify(sasQueryUrl.queryString);
	// Set the full path on the new new item, 
                // which is used for data binding on the client. 
                item.imageUri = sasQueryUrl.baseUrl + sasQueryUrl.path;
    } else {

What is happening in the script above ?

This new script generates a new SAS for the insert, which is valid for 5 minutes, and assigns the value of the generated SAS to the sasQueryString property of the returned item. The imageUri property is also set to the resource path of the new BLOB to enable image display during binding in the client UI.

To implement this on different platforms check out the links below



Cross Platform  with Apache Cordova


Blob Storage with Rest APIs




Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>