Uploading image to azure blob from windows store app

Published March 22, 2013 11:11 am

msdn gives quick start to upload image file using background transfer.  but I was looking for way to upload image file using WinJS.xhr() in the javascript app.

Windows.Storage.Pickers.FileOpenPicker.pickSingleFileAsync() returns StorageFille object  whereas WinJS.xhr.send() expects a File DOM object. Essentially, what we need is way to get a w3c File DOM object out of StorageFile object. I found finally the method MsApp.createFileFromStorageFile() to do that.

// url needs to be SAS (shared access signature) url for the blob when the container is protected
// otherwise - it requires putting authorization code in the request. I have talked about in previous post.
// but if the javascript is in the client side - you wont like to put your client secret in the app.
// hence, you need to have some mechanism (your service) to return the sas url for your azure container/blob. 

    var url = '';
    var date = new Date().toGMTString().replace('UTC', 'GMT');
    var data = MSApp.createFileFromStorageFile(storageFile);
    var xhrOptions = {
        type: 'PUT',
        url: blobSasUrl,
        headers: {
            'Content-Type': 'image/jpeg',
            'Content-Length': data.size,
            'x-ms-date': date,
            'x-ms-version': '2009-09-19',
            'x-ms-blob-type': 'BlockBlob',
        data: data,
    WinJS.xhr(options).then(null, function onerror(error)
        // handle error

I see that many of us need to upload images to azure blob containers. If you are one of us, it will help to know little bit more to help you better.


  1. Ravindra

    Hey… thanks for an amazing post… But i’m stuck here… Do i have to create a SAS uri for a container or a blob?
    i’m trying to upload files from Win store app.

  2. Sushil Baid Post author

    Hi Ravinder, question needs more data to answer it. I am assuming that you have some kind of service that can return sas uri(s). few pointers that might help.
    1. To upload multiple files, you will need to upload them to multiple blobs in all likelihood. So, you can either return a container uri or multiple blob uri from your service.
    2. If you app needs to be used by multiple users – your service need to think how to return unique uris for different users so that they don’t overwrite each other files. also – address security.
    3. blob uri can be formed by appending blobname to the container uri on client side as well.
    4. if multiple files are properties of an object, you may want to design your api to return json object with multiple blob uri fields.

Leave a comment