Azure mobile service and Azure storage integration

Question

We use Azure Mobile Services with Javascript (Node.js) back-end. The front-end is HTML/Javascript and runs as Azure Web App. We want to use Azure blob storage to store files (uploaded from front-end). I searched for a working example implementing this scenario, but I can't find it. There are examples with .NET back-end or Android/Windows Phone front-end. As a workaround it's possible to post the file to mobile service and do the storage from there, but the mobile service api body has a 1MB limit. I know I have to use a Shared Access Signature (SAS), but I don't know how to implement that. Generating the url from mobile service works. But it's not accepted when I use it in the client.

This guide is not working anymore: http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/

Thanks in advance for your help!

if your frond-end has code on server side, you can easily use azure storage SDK to generate SAS and talk to Azure storage github.com/Azure/azure-storage-node (i assume you are running nodejs) — Xiaomin Wu
Hi Xiaomin, server side is Azure Mobile Services with JavaScript (node.js). It's possible to generate SAS there with the Azure storage SDK, but it doesn't work when I use this SAS on the frontend (plain JavaScript). Authorization errors. — Jeroen Custers
if you are trying to access azure stroage from your client side javascript code directly, you will hit cross origin issue. you will need to config your storage account i believe. msdn.microsoft.com/en-us/library/azure/… — Xiaomin Wu
Yes CORS is also an issue, but even when I use chrome with --disable-web-security I get authentication errors (Authorization header signature) — Jeroen Custers
Did you configure your storage account? to enable CORS, you need to have CORS rules in your acccount. please refer to the link i post above — Xiaomin Wu

Gary Liu Gary Liu · Accepted Answer · 2015-11-20T02:17:22

As usually, custom APIs on mobile services are used in handling logic workflows or event triggers. So Azure mobile service limit the body size of custom APIs requests for better performance. To implement upload files from clients to Azure Storage, we recommend to leverage SAS URIs.

And lots samples use the backend project to generate the SAS URI and return back to front-end.We can leverage Azure Node.js SDK in Mobile service custom APIs scripts to generate SAS URI.

Here is the code snippet:

exports.get = function(request, response) {
    var azure = require('azure');
    var qs = require('querystring');
    var accountName = { accountName };
    var accountKey = { accountKey };
    var host = accountName + '.blob.core.windows.net';
    var blobService = azure.createBlobService(accountName, accountKey, host);

    var startDate = new Date();
    var expiryDate = new Date(startDate);
    expiryDate.setMinutes(startDate.getMinutes() + 30);
    startDate.setMinutes(startDate.getMinutes() - 30);

    var sharedAccessPolicy = {
      AccessPolicy: {
        Permissions: azure.Constants.BlobConstants.SharedAccessPermissions.WRITE,
        Start: startDate,
        Expiry: expiryDate
      },
    };
    // you can custom send container name and blob name via http get request
    /** e.g. var containerName = request.query.container, 
                 blobName = request.query.blob

        client side use invokeApi method, e.g.
        client.invokeApi('getSAS',{
            method:'GET',
            parameters:{container:'mycontainer',blob:'myblob'}
        })
    **/
    var blobSAS = blobService.generateSharedAccessSignature('mycontainer', 'myblob', sharedAccessPolicy);
    var sasQueryString = qs.stringify(blobSAS.queryString);
    var sasUri = blobSAS.baseUrl + blobSAS.path;
    response.send(sasUri+"?"+sasQueryString);
};

You can refer to Upload images to Azure Storage from an Android device and Work with a JavaScript backend mobile service for reference.

Furthermore, for a deep understanding of generating SAS URI, you can refer to Constructing a Service SAS and Shared Access Signatures, Part 1: Understanding the SAS Model

Additionally, here is a similar example built in this architecture, Upload files to Microsoft Azure Storage from JavaScript

Azure mobile service and Azure storage integration

1 Answers